Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Merge pull request #3334 from garann/master
Browse files Browse the repository at this point in the history 
Fix for overlapping header/footer buttons
  • Loading branch information
@Wilto
Wilto committed Dec 25, 2011
2 parents aaeacae + dde96bd commit 138547c
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion css/structure/jquery.mobile.button.css
View file
@@ -1,5 +1,5 @@
.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; }
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; max-width: 30%; }
.ui-btn-inline { display: inline-block; }
.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
.ui-btn input, .ui-btn button { z-index: 2; }
Expand Down
2 changes: 1 addition & 1 deletion css/structure/jquery.mobile.core.css
View file
Expand Up @@ -75,7 +75,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-page .ui-header, .ui-page .ui-footer { position: relative; }
.ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em; }
.ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; }
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
.ui-footer .ui-title { margin: .6em 15px .8em; }

/*content area*/
Expand Down

4 comments on commit 138547c

@agcolom
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi,

It seems that the max-width: 30% in css/structure/jquery.mobile.button.css is causing the navbar inside the header or footer bar to display with a max-width of 30% of the allocated width of the button... so when having a navbar with 3 buttons, each button is taking 10% of the width of the screen with 20% blank space between each button... You can check at http://jquerymobile.com/test/docs/toolbars/docs-navbar.html

Thanks,

Anne

@toddparker
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@agcolom - I just tested that page in Chrome 15/Mac and the 3 wide navbar looks ok. Is there a specifici window width I need to resize to?

@agcolom
Copy link
Contributor

@agcolom agcolom commented on 138547c Jan 1, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@toddparker - It was on everything, but Garann fixed it with pull request #3344

@toddparker
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha, thanks.

Please sign in to comment.