JQuery Mobile szerokość zestawu 2 elementów do 80% i 20%

Question

Używam JQuery Mobile i próbuję ustawić szerokość dwóch elementów przy użyciu ui-grid-a, jak pokazano w poniższym kodzie. Wynikiem są 2 elementy, których szerokość jest równa 50:50%. Chciałbym, aby moja szerokość tekstu wejściowego była 80%, a mój przycisk miałby być 20% w tej samej linii. Jak to zrobić?

<div data-role="footer" data-theme="a" class="ui-grid-a" 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> 

Answer 1

Można zastąpić każdą szerokość kolumny siatki.

<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

przykład robocza: 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>