CODEWITHSUNDEEP
jquery-mobile
Jono
Jono

Reputation: 18128

input fields in jquery mobile dont expand to fill the screen

As the title says,

When i use a input field in a jquery mobile page, it doesnt expand the input fields to the full width of the screen.

If you use a small screen device, it fits fine but when you view the page in a desktop browser, the input fields only appears 2/3 of the width of the browser.

Is there a way to set it to expand to whatever the browser/screens width is?

here is my code:

http://jsfiddle.net/B8JDt/2/

<body>
<div data-role="page" id="page" onLoad="initialiseFields()">
  <div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > <a href="" onclick="history.back(-1); return false;">Back</a>
    <h1>New Claim</h1>
  </div>
  <div data-role="content">
    <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">
      <li data-role="list-divider">
        <h2 id="itemTitle">Title</h2>
      </li>

      <li>
        <h3>Journey From:</h3>
        <div data-role="fieldcontain">
          <input type="text" name="claimTitle" id="textFieldJourneyFrom" value="" />
        </div>
      </li>
      <li>
        <h3>Journey To:</h3>
        <div data-role="fieldcontain">
          <input type="text" name="claimTitle" id="textFieldJourneyTo" value="" />
        </div>
      </li>

    </ul>
    <div data-role="navbar">
      <ul>
        <li><a href="hello.html" data-theme="b">Save</a></li>
      </ul>
    </div>
  </div>
</div>
</body>

Upvotes: 1

Views: 513

Answers (1)

Gajotres
Gajotres

Reputation: 57309

jQuery Mobile has a buggy implementation of box-resizing CSS3 rule.

To fix this problem use this CSS:

@media all and (min-width: 28em){
    .ui-input-text  {
        box-sizing: none !important;
        -moz-box-sizing: none !important;
        -webkit-box-sizing: none !important;
        width: 100% !important;
        display: inline-block !important;
    }
}

Fist box-sizing: none don't exist but it will override default value and it is better to override it like this then to remove it manually from a css file.

Working example: http://jsfiddle.net/B8JDt/3/

Upvotes: 2

Related Questions