jQuery mobile button stretching too far

Question

For some reason the button under the text fields seems to get wider than the textboxes the more I resize the browser window. Any ideas why?

SCRN :

enter image description here

HTML :

   <!DOCTYPE html>
    <html>
    <head>
        <title>Title</title>
        <script src="scripts/ajax.js"></script>
        <link rel="stylesheet" href="css/custom.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
<div data-role='page' id='confirmDetails' data-add-back-btn='true' data-theme='a'>
<div data-role='header' data-position='fixed'><h1>Confirm Details</h1></div>
<div class='ui-body ui-body-e'><p><strong>Please recheck your details to make sure they are correct, then press confirm.</strong></p></div>
<div data-role='content'>
<div><label>Name</label><input type='text' value='Some factor name' disabled /></div>
<div><label>VAT No</label><input id='txtFVATNo' type='text' value='121212121' placeholder='vat no' /></div>
<div><label>Email</label><input id='txtFEmail' type='email' value='a@b.com' autocapitalize='none' placeholder='email address' /></div>
<div><label>Name</label><input id='txtFContactName' type='text' value='Muhammad' autocapitalize='words' placeholder='contact name' /></div>
<input type='submit' id='btnConfirm' value='Everything Correct - Confirm!' data-icon='check' data-iconpos='right' /></div>
</div>
    </body>
    </html>

EDIT:

Setting custom css for the #confirmButton to width 97% didnt work,

This didnt work either :

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Here is the CSS for the button :

webkit-appearance: none;
-webkit-box-align: center;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(255, 255, 255, 0);
background-image: none;
background-origin: padding-box;
border-bottom-color: black;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: black;
border-left-style: none;
border-left-width: 0px;
border-right-color: black;
border-right-style: none;
border-right-width: 0px;
border-top-color: black;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: black;
cursor: pointer;
display: block;
filter: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 1px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 39px;
left: 0px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.10000000149011612;
padding-bottom: 1px;
padding-left: 6px;
padding-right: 6px;
padding-top: 1px;
position: absolute;
text-align: center;
text-decoration: none;
text-indent: -9999px;
text-shadow: none;
text-transform: none;
top: 0px;
white-space: pre;
width: 391px;
word-spacing: 0px;
z-index: 2;

SCREENSHOT (for my head hurts) :

enter image description here

SOLUTION :

This works with latest 1.1.0 release.

input.ui-input-text, textarea.ui-input-text {
    width: 100% !important;       /* used to be width: 97%; */
    /* add box sizing so padding is included in width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

As mentioned in the answers, padding and dimensions set to `100%` don't get along. In this case, if there really is padding there, which there most likely is, I would set `#btnConfirm { width: 100%; padding: 5px 0px 5px 0px; }` cause you really don't need padding on the sides in this case. — Joonas, Apr 16 '12 at 10:36
The button has static width? Is this `element.style` that is possibly generated by jquery-mobile or the css that you've set for the button? ..and if it is not the css that you've set in your css file, please add that as well. ..and what he said below ↓ — Joonas, Apr 16 '12 at 10:59
The css above is element.style, I have no custom css for the button. JSFiddle is http://jsfiddle.net/EbgpR/ ignore the weird button inside a button it produced. Whats important is the original issue above is there. — sprocket12, Apr 16 '12 at 11:08
Here is one without the overlapping button - http://jsfiddle.net/EbgpR/1/ (I simply removed jquery mobile option from side) — sprocket12, Apr 16 '12 at 11:26
On desktop browsers when adjusting the window size, I'm getting very consistent results. Small window size = button width is less than input width. Big window size = button width is bigger than input width. Since it seems to work like that with no additional css, I would asume that it's just the way that it works, but I really wouldn't know. I haven't played around with jquery mobile enough to say much more than that. — Joonas, Apr 16 '12 at 11:30
@MyHeadHurts please post one with width 100% !important as answer so I can mark as accepted. Its been tested working with 1.1.0. If I take the important out it doesnt work any more. — sprocket12, Apr 23 '12 at 09:11

My Head Hurts · Accepted Answer · 2012-04-23T09:26:51.330

1

In jquery.mobile-1.1.0.min.css there is a conflicting combination of widths, padding and margin between input.ui-input-text, textarea.ui-input-text and .ui-btn, which is why they appear differently.

Change the css to the following:

.ui-btn {
    ....
    margin: 0.5em 0;   /* used to be margin: 0.5em 5px; */
    ....
}

input.ui-input-text, textarea.ui-input-text {
    ....
    width: 100% !important;       /* used to be width: 97%; */
    /* add box sizing so padding is included in width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    ....
}

This should resolve your issues: http://jsfiddle.net/RVgnC/5/

edited Apr 23 '12 at 09:26

answered Apr 16 '12 at 09:57

My Head Hurts

37,315
16
75
117

Hi MyHeadHurts, nice find. But unfortunatly it has some side effects. – sprocket12 Apr 16 '12 at 12:30
Here is my login page before : http://jsfiddle.net/RVgnC/ and after the custom css : http://jsfiddle.net/RVgnC/1/ – sprocket12 Apr 16 '12 at 12:38
It almost sorted the login page, the top circular button is now touching the bottom of the header, and the list views have messed up :D I think your head will really hurt if you continue to try and follow this through. Please see screenshot above. – sprocket12 Apr 16 '12 at 13:59

score 0 · Answer 2 · answered Apr 16 '12 at 09:50

0

Do not use "width:100%" if your CSS button have "padding-left / padding-right",

please try change to "width:97%" or 95% or else.

answered Apr 16 '12 at 09:50

IRvanFauziE

823
11
16

I think, setting the width to 97% or 95% isn't clever, because if you have for example an iPad, then the button has in landscape mode a different width as in portrait mode. The percent in width depends always on the screen width – Tobi Apr 16 '12 at 12:17

score 0 · Answer 3 · answered May 09 '12 at 15:57

0

For older versions you can postprocess the width via javascript. But you have to change the padding to 'px' to subtract it from $('.ui-content').outerWidth();

answered May 09 '12 at 15:57

mr_app

1,292
2
16
37

score 0 · Answer 4 · answered Sep 19 '12 at 14:17

0

If you put it in a table you can apply the

http://www.w3.org/TR/REC-CSS2/tables.html#width-layout

property -> <table style="table-layout:fixed">

That will prevent any from streching past their set widths! that includes jQuery buttons inside them ;)

answered Sep 19 '12 at 14:17

krilovich

3,475
1
23
33

@muhammada didn't ask how to layout a table, so http://www.w3.org/TR/REC-CSS2/tables.html#width-layout doesn't apply. He asked a CSS layout question pertaining to button and list content not tabular content. – gabe Nov 05 '12 at 21:27
I'm sorry you were offended by the downvote, sir. I agree that users have the right to give the answer they want and as well as downvote at their discretion. Isn't one of the primary uses of SO the user-run voting system to help bubble-up the most relevant answers? This question described something I have been trying to solve. As I sifted through the answers here, I felt like your answer was off-topic since he was asking a CSS list layout question. Taking downvotes personally to the point of using personal attacks and retaliatory downvotes is pretty tacky, sir. – gabe Nov 13 '12 at 20:51

jQuery mobile button stretching too far

4 Answers4