Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
Talkless opened this Issue · 5 comments

3 participants

@Talkless

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 <a> buttons fixes it, but shouldn't they be inline only when specifically adding ui-btn-inline or something..? Or, shouldn’t <button> work in the same way for consistency?

P.S. I could use <button>, 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
@gabrielschulhof
Collaborator

@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.

@Talkless

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

@gabrielschulhof
Collaborator

@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.

@Talkless

OK @gabrielschulhof, thank you for clarification!

@VineetReynolds VineetReynolds referenced this issue in jboss-developer/jboss-wfk-quickstarts
Closed

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

@VineetReynolds VineetReynolds referenced this issue from a commit in jboss-developer/ticket-monster
@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
info.
5539131
@jaspermdegroot
Collaborator

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 referenced this issue from a commit in agcolom/jquery-mobile
@jaspermdegroot jaspermdegroot Core: Width auto for inline button elements in toolbars
Fixes gh-7232
Closes gh-7446
b4950e7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.