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

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

@ghost ghost assigned jaspermdegroot Jul 16, 2012

@rubenpenyafiel

This comment has been minimized.

Show comment
Hide comment
@rubenpenyafiel

rubenpenyafiel Jul 16, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 16, 2012

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.

Member

jaspermdegroot commented Jul 16, 2012

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

@rubenpenyafiel

This comment has been minimized.

Show comment
Hide comment
@rubenpenyafiel

rubenpenyafiel Jul 16, 2012

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

@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

This comment has been minimized.

Show comment
Hide comment
@rubenpenyafiel

rubenpenyafiel Jul 16, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 16, 2012

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.

Member

jaspermdegroot commented Jul 16, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@rubenpenyafiel

rubenpenyafiel Jul 16, 2012

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

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 16, 2012

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.

Member

jaspermdegroot commented Jul 16, 2012

@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 added a commit that referenced this issue Jul 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@LAOMUSIC

LAOMUSIC Jan 17, 2013

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

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