Skip to content
Browse files

Merge pull request #3334 from garann/master

Fix for overlapping header/footer buttons
  • Loading branch information...
2 parents aaeacae + dde96bd commit 138547c28a9b884e3105fdacc39e8c95a847d51a @Wilto Wilto committed Dec 24, 2011
Showing with 2 additions and 2 deletions.
  1. +1 −1 css/structure/jquery.mobile.button.css
  2. +1 −1 css/structure/jquery.mobile.core.css
View
2 css/structure/jquery.mobile.button.css
@@ -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; }
View
2 css/structure/jquery.mobile.core.css
@@ -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*/

4 comments on commit 138547c

@agcolom
jQuery Foundation member

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

@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
jQuery Foundation member
agcolom commented on 138547c Jan 1, 2012

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

@toddparker

Gotcha, thanks.

Please sign in to comment.
Something went wrong with that request. Please try again.