You can use a layout grid to place controls next to each other in your application. By default, the layout grid creates column cells with equal width. This recipe shows you how to customize this and create cells with varying heights and widths.
Copy the full code of this recipe from the code/04/layoutgrid
sources folder. You can launch this code using the URL http://localhost:8080/04/layoutgrid/main.html
.
Add a layout grid to
main.html
as shown in the following code, using theui-grid
andui-block
classes:<div data-role="content"> <fieldset class="ui-grid-a"> <div class="ui-block-a" style="width: 25%"> <div class="ui-bar ui-bar-e">Col A</div> </div> <div class="ui-block-b" style="width: 50%"> <div class="ui-bar ui-bar-e">Col B</div> </div> <div class="ui-block-c" style="width: 25%"> <div class="ui-bar ui-bar-e">Col C<...