如何将输入字段扩展到对话框宽度的100％？

我正在使用jQuery移动1.3，并有弹出对话框样式的一些麻烦。如下所示的对话框：如何将输入字段扩展到对话框宽度的100％？

enter image description here

的HTML代码后如下所示：

<div data-role="popup" id="AddingDialog" data-overlay-theme="a" data-theme="c" style="max-width:500px;" class="ui-corner-all"> 
    <div data-role="header" data-theme="a" class="ui-corner-top"> 
     <h1>Modify Item</h1> 
    </div> 
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
     <h3 class="ui-title">Adding new item</h3> 
      <div data-role="fieldcontain" > 
      <input type="text" name="name" id="addItemInput" placeholder="label of new item" maxlength="100" value="" /> 
     </div> 
     <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a> 
     <a href="#" data-role="button" data-inline="true" data-rel="back" 
      data-theme="b" data-transition="flow" id="doAddItem">Yes</a> 
    </div> 
</div>

我希望的对话框是更广泛的，该输入场延伸到对话的整个宽度，并且按钮对齐正确。

使用Firefox开发工具（Examiner）进行探索我发现在某处定义了78％的宽度。但我不知道如何去除这个限制。当我点击这个蓝色阴影时，我也不会对这个蓝色阴影感到兴奋，当这个蓝色阴影被点击时它会保持在那里。

我不是jQuery手机的CSS编程专家。

来源

2013-03-13 chmike

检查这个例子http://jsfiddle.net/Palestinian/Qq9Wj/为蓝色阴影，我会给你一个答案。 – Omar 2013-03-13 18:29:52

非常好！问题显然是这个div data-rol =“fieldcontain”。我现在可以通过将size = 40属性设置为输入字段来获得大的字段。剩下要解决的是按钮的精确定位和去除蓝色光环。 – chmike 2013-03-13 20:13:41

我忘记删除data-inline =“true”。删除它并将数据角色弹出窗口标签的样式最小宽度设置为所需的宽度后，它现在是完美的。唯一的问题是光环，但这不是一个大问题。非常感谢你。我在哪里可以找到关于这些ui-grid-X和ui-block-X类的文档？ – chmike 2013-03-13 20:33:50

更新

为了消除文本框的阴影，你需要重写JQM CSS ui-focus。

在JQM样式表之后添加下面的样式来覆盖它。

.ui-input-text.ui-focus { 
-moz-box-shadow: none !important; 
-webkit-box-shadow: none !important; 
box-shadow: none !important; 
}

这里的popup最后一下。

jquery mobile有一个内置的网格系统，可以方便定位和对齐页面内容。这里是JQM文档的链接：http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html

来源

2013-03-13 23:26:25 Omar

div data-role =“fieldcontain”取自1.2.0文档中给出的弹出示例。我认为这是必需的。非常感谢你。重点晕被删除。很好的答案。非常感谢你，你为我节省了很多时间。 – chmike 2013-03-16 11:23:23

我很高兴我一直在帮忙:) @chmike – Omar 2013-03-16 12:05:14

如何将输入字段扩展到对话框宽度的100％？

回答

相关问题