New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Talkless opened this Issue Mar 11, 2014 · 5 comments

Comments

Projects
None yet
3 participants
@Talkless

Talkless commented Mar 11, 2014

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.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 11, 2014

Contributor

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

Contributor

gabrielschulhof commented 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.

@Talkless

This comment has been minimized.

Show comment
Hide comment
@Talkless

Talkless Mar 11, 2014

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

Talkless commented Mar 11, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 11, 2014

Contributor

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

Contributor

gabrielschulhof commented Mar 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@Talkless

Talkless Mar 11, 2014

OK @gabrielschulhof, thank you for clarification!

Talkless commented Mar 11, 2014

OK @gabrielschulhof, thank you for clarification!

VineetReynolds added a commit to jboss-developer/ticket-monster that referenced this issue May 15, 2014

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 29, 2014

Member

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.

Member

jaspermdegroot commented May 29, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment