JQM 1.4.2: Anchor buttons width is different when used inside footer with grid #7232

Talkless opened this Issue Mar 11, 2014 · 5 comments


None yet

3 participants


JSFiddle: using JQM 1.4.2: http://jsfiddle.net/34qUF/
JSFiddle: using JQM 1.3.2: http://jsfiddle.net/YxA2R/1

Is this by design (yet another deprecation?), o regression? Did I missed something in documentation?

It looks like making "display: block" (instead of inline-block) here:

.ui-header .ui-btn, .ui-footer .ui-btn {
  display: block;
  font-size: 12.5px;
  vertical-align: middle;

for buttons fixes it, but shouldn't they be inline only when specifically adding ui-btn-inline or something..? Or, shouldn’t work in the same way for consistency?

P.S. I could use

, but anchor's #href is more convenient in my case. In any way, I think it's worth noting it here.

@jaspermdegroot jaspermdegroot added this to the 1.4.3 milestone Mar 11, 2014

@Talkless yeah, that's what I suggested to the OP of #7222 as well - simply add custom CSS to make the buttons' display property block.


So why walk-arounds and hand-made fixes? What is reason for this design exaclty?


@Talkless IINM it has always been our intention to make anchors inside toolbars be mini and inline by default, even if the ui-mini and ui-btn-inline classes are not specified. There's still an issue here though, so that's why this issue is staying open. @uGoMobi is looking into it.


OK @gabrielschulhof, thank you for clarification!

@VineetReynolds VineetReynolds referenced this issue in jboss-developer/jboss-wfk-quickstarts May 9, 2014

[JDF-702] - Update contacts-mobile-basic to use jQuery Mobile 1.4.2 #154

@VineetReynolds VineetReynolds added a commit to jboss-developer/ticket-monster that referenced this issue May 15, 2014
@VineetReynolds VineetReynolds Fixed button styling issue in toolbars with grids.
A new CSS rule was introduced to ensure that buttons are displayed
as block-level items instead of inline-block items when present in
grids in a footer or header.

See jquery/jquery-mobile#7232 for more

Currently we make all buttons inside toolbars inline and mini, whether they are in a grid or not. The button element in the footer on the test page is also inline-block but it has width: 100%. That is a bug, so we have to change that to width: auto;.

I think we should remove this behaviour and just leave it up to the developer. We only deprecated the auto-enhancement of links and buttons inside toolbars, so we have to deprecate the behaviour first in 1.5 and remove the CSS rules in 1.6.

@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@jaspermdegroot @agcolom jaspermdegroot + agcolom Core: Width auto for inline button elements in toolbars
Fixes gh-7232
Closes gh-7446
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment