Input submit lacks 100% width when placed in fieldcontain with .ui-hide-label on wider screens #4705

Closed
rubenpenyafiel opened this Issue Jul 16, 2012 · 8 comments

Projects

None yet

3 participants

@rubenpenyafiel

If you have something like:

<div data-role="fieldcontain" class="ui-hide-label">
    <input type="submit" value="something" />
</div>

And if the screen is bigger than 450px the button CSS is:

display:inline-block; /* inherited from .ui-field-contain .ui-btn.ui-submit {} when width > 450px */
width: auto;

Shouldn't it be?

width: 100%

The problem is in css/structure/jquery.mobile.button.css lines 87-88.

I'm using the latest version 1.1.1

@rubenpenyafiel

I'm using the pull request for the first time and I've messed it up a little I think... Here's the pull request:

#4706

Also, I'm not sure how to reference other issues.

@jaspermdegroot
jQuery Foundation member

@rubenpenyafiel

Thanks for reporting the issue!
Actually the problem is that display: inline-block that is set for submit buttons wrapped in ui-field-contain isn't overridden. I will fix this now.
You can add this to your custom/theme CSS to solve the problem:

.ui-hide-label .ui-btn.ui-submit { display: block !important; }

The !important is just there so it doesn't matter where you put this code.

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jul 16, 2012
@jaspermdegroot jaspermdegroot Button: Submit buttons should be full width when label is hidden. Fixes
#4705 - Input submit lacks 100% width when placed in fieldcontain with .ui-hide-label on wider screens.
cb1a883
@rubenpenyafiel

@uGoMobi

I thought of doing display:block; but it reminded me of a similar problem with selects in earlier versions of jQuery Mobile, but in that case you solved it doing width: 100%;

https://github.com/jquery/jquery-mobile/blob/master/css/structure/jquery.mobile.forms.select.css lines 44-48

@media all and (min-width: 450px){
    .ui-field-contain label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
    .ui-field-contain .ui-select { width: 78%; display: inline-block; }
    .ui-hide-label .ui-select { width: 100%; }
}

Maybe you should adopt a common implementation for both of them.

@rubenpenyafiel

Oh, I've just seen your comment in my pull request. This double issue thing causes confusion :)

If there's a reason to not use width: 100%; then it's fine.

@jaspermdegroot
jQuery Foundation member

@rubenpenyafiel

I noticed your PR #4706 too late, sorry. If I would have known you wanted to create one I would have wait to give you the opportunity.

The reason I don't set 100% width is the 1px border. Although I added box-sizing border-box, we also support IE7/WP7 that doesn't support that property. Since there is padding on the ui-content div this is not a big problem, but if not necessary I prefer width: auto;.

I don't know what the issue was with the select menu button, but I am pretty sure it works like this.

BTW - Referencing another issue is done by # and then the issue number. See GitHub Flavored Markdown.

@rubenpenyafiel

@uGoMobi

Thanks for the explanations, both jQM and github!

The select issue I was referring to is #3301 about full width forms and it was fixed in commit cb16e2f

Now I get that select can use width: 100%; because it doesn't have any borders.

@jaspermdegroot
jQuery Foundation member

@rubenpenyafiel

No problem. Thanks for looking up that issue.

About #3301. We made changes to standardize the width, margins, etc. of all form elements.

Forms that use ui-field-contain are also full width now on screens 450+px: 22% label and 78% the form element. This last change didn't land in 1.1.1. though. Or actually I changed the 78% back to 60% for that release (commit caa89f9).

This is because it is a maintenance release where we don't want to make big chances in appearance. On master (latest code) and in 1.2 this you will see this change.

@jaspermdegroot jaspermdegroot added a commit that referenced this issue Jul 16, 2012
@jaspermdegroot jaspermdegroot Button: Submit buttons should be full width when label is hidden. Fixes
#4705 - Input submit lacks 100% width when placed in fieldcontain with .ui-hide-label on wider screens.
f1e4f5a
@LAOMUSIC

If for a desktop size, try this:
http://jsfiddle.net/6rCmY/1/

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