JQuery Mobile set width of 2 elements to 80% and 20%

css, jquery-mobile

Solution

You can override each grid column width.

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

Problem

I am using JQuery Mobile and am trying to set the width of two elements using `ui-grid-a` as shown in the code below. The result is 2 elements whose width is equal to `50:50%`. I would like my input text width to be `80%` and my button to be `20%` in same line. How can do this? ``` <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> ```

Original source