JQuery Mobileの2要素の幅を80％と20％に設定

Question

JQuery Mobileを使用しており、ui-grid-aを使用して2つの要素の幅を設定しようとしています。結果は、幅が50:50%に等しい2つの要素です。入力テキストの幅を80%、私のボタンを同じ行に20%としたいと思います。どのようにこれを行うことができますか？

Answer 1

各グリッド列の幅を上書きできます。

<div class="ui-block-a" style="width:80%"><input id="outgoingMsg" placeholder="Your Message . . ."></div> 
<div class="ui-block-b" style="width:20%" > 
    <div style="margin: 10px 0 0 0;"> 
     <a id="callDialog" href="#dialog" type="button" data-theme="b" data-rel="dialog" data-transition="slidedown">Send</a> 
    </div> 
</div> 

Answer 2

の作業例：http://jsfiddle.net/Gajotres/eFWRQ/

CSS：

#custom-footer .ui-block-a { 
    width: 80% !important; 
} 

#custom-footer .ui-block-b { 
    width: 20% !important;  
} 

HTML：

<div data-role="footer" data-theme="a" class="ui-grid-a" id="custom-footer" data-position="fixed"> 
    <div class="ui-block-a" ><input id="outgoingMsg" placeholder="Your Message . . ."></div> 
    <div class="ui-block-b" > 
     <div style="margin: 10px 0 0 0;"> 
      <a id="callDialog" href="#dialog" type="button" data-theme="b" data-rel="dialog" data-transition="slidedown">Send</a> 
     </div> 
    </div> 
</div>