Strange text input width in jQuery Mobile

Question

I came across strange behavior related to the width of text input in jQuery Mobile - it's just too big.

<div data-role="page"> <div data-role="header"> <h1>Test</h1> </div> <div data-role="content"> <input type="text" value="192.168.1.1"></input> <a data-role="button">Connect</a> </div> </div> 

You can also reproduce this behavior by reducing the width of the browser window, for example, in jsFiddle.

jsFiddle:
http://jsfiddle.net/QxYMa/

Is this normal behavior or just a mistake? How can I “fix” this so that the text input and button are the same width?

Answer 1

The input and button had several different CSSs that were automatically applied to it. I added the following CSS, which seems to make CSS explicitly consistent for both of them:

 <div data-role="page"> <div data-role="header"> <h1>Test</h1> </div> <div data-role="content"> <input type="text" value="192.168.1.1" style="width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;"/> <br/> <a data-role="button" style="width:100%;margin:0">Connect</a> </div> </div> 

It looks like the input-model field was turned off and the button marker was turned off. Here is a good article on a box model that seems to shed some light on this: http://www.jefftk.com/news/2012-02-18.html

Hope this helps!

Answer 2

Right before my start of my main jquery mobile structure.css, I added a more complete CSS reset. This can help you.

 /* CSS Reset*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0; font-size:100%;vertical-align:baseline; background:transparent}body {line-height:1}ol,ul {list-style:none}blockquote,q {quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus {outline:0}ins {text-decoration:none}del {text-decoration:line-through}table {border-collapse:collapse;border-spacing:0} 

Answer 3

As an example, you can add a new topic. In the example below, I added the topic F. Add more css to the theme and then call data-theme = "f" on your input element. Then you can create it in your heart. One remark. You may need to use! It is important to redefine the base sizes set by JQM.

 .ui-bar-f input { font-family: 'HelveticaNeueLTStd55Roman', Helvetica, Arial, sans-serif; width:250px !important; } 

Answer 4

The input fields just want to be complete. Installation width: 80 pixels, however, limit their width. See this script with lines of both regular and mini versions.

http://jsfiddle.net/den232/WzH3Y/

  .floatleft { float:left; } .floatright { float:right; } .forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */ display:inline !important; } .textwidth { /* limit width of input fields */ width:80px; } .closespacing { /* controls spacing between elements */ margin:0px 5px 0px 0px; } .bigselect { /* centers select with big buttons */ padding: 0px; margin:2px 5px 0px 0px; } .biginputheight { /* matches text input height to big buttons */ padding-top:10px !important; padding-bottom:12px !important; } .miniinputheight { /* matches text input height to minibuttons */ padding-top:5px !important; padding-bottom:5px !important; } <div data-role="page" class="type-home"> 

 <ul data-role="listview"> <li data-role="fieldcontain">first LI line</li> <li data-role="fieldcontain"> <div class='floatleft closespacing'> Big Buttons<br>More Text </div> <div class='floatleft textwidth'> <input type="text" placeholder="left" class='biginputheight'></input> </div> <div class='floatright textwidth'> <input type="text" placeholder="right" class='biginputheight'></input> </div> </li> <li data-role="fieldcontain"> <div class='floatleft closespacing'> Small Buttons </div> <div class='floatleft textwidth'> <input type="text" placeholder="e2" class='miniinputheight'></input> </div> <div class='floatright closespacing'> <div class='floatright closespacing'> e3 Text<br>on right </div> <div class='floatright textwidth'> <input type="text" placeholder="e3" class='miniinputheight'></input> </div> </div> </li> <li data-role="fieldcontain">last LI line</li> </ul><!-- /listview -->