如何將輸入字段擴展到對話框寬度的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％？

回答

相關問題