Question

正如标题所说，

当我在jquery移动页面中使用输入字段时，它不会将输入字段扩展到屏幕的整个宽度。

如果你使用小屏幕设备，它很合适但是当你在桌面浏览器中查看页面时，输入字段只显示浏览器宽度的2/3。

有没有办法将其设置为扩展到浏览器/屏幕宽度是什么？

这是我的代码：

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

Answer 1

jQuery Mobile有一个框大小调整CSS3规则的错误实现。

要解决此问题，请使用此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;
    }
}

拳头 box-sizing: none 不存在，但它会覆盖默认值，最好像这样覆盖它，然后从css文件中手动删除它。

工作示例：http://jsfiddle.net/B8JDt/3/

jquery mobile中的输入字段不会展开以填充屏幕

1 个答案: