jQuery Mobile - input field across two columns in a three-column ui-grid layout?

Question

How can I add an input text field across two columns in a three-column ui-grid layout (33/33/33%)?

The goal is that the input text field takes 66% and the third column occupies the rest.

Example ui-grid from jquery mobile:

<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-a -->

Solution 1

simply overwrite the width property:

.ui-grid-a .ui-block-a { width: 65% }
.ui-grid-a .ui-block-b { width: 35%; } 

http://forum.jquery.com/topic/unequal-layout-grids-columns-or-colspan-like-behavior

Solution 2

You could use:

<div class="ui-grid-b">
  <div class="ui-block-a ui-block-span2">
    Block A+B
  </div>
  <div class="ui-block-c">
    Block C
  </div>
</div>

You need to add the CSS below to achieve this. This could be used with any jqm grid layout simply adding the class ui-block-span* the your div blocks.

.ui-grid-b > .ui-block-span2 {
  width: 66.6666%;
}
.ui-grid-c > .ui-block-span2 {
  width: 50%;
}
.ui-grid-c > .ui-block-span3 {
  width: 75%;
}
.ui-grid-d > .ui-block-span2 {
  width: 40%;
}
.ui-grid-d > .ui-block-span3 {
  width: 60%;
}
.ui-grid-d > .ui-block-span4 {
  width: 80%;
}

Comments

[Chris Nash]

This is the absolute minimum level of specificity you'll need to override the JQM CSS. You might encounter problems though if JQM loads another page where you're expecting 50/50 behavior (the CSS won't reload if JQM is able to Ajax the new page into the existing DOM). I'd recommend you'd add another class to the div blocks you want to tweak the widths of: .ui-grid-a .ui-block-a.main and .ui-grid-a .ui-block-b.side, for instance. Now you can use ui-block-a and b's inside ui-grid-a's elsewhere and still get 50/50.