jQuery Mobile: One button or solo grid

This entry is part 41 of 73 in the series jQuery Mobile

For a single button to occupy the entire page, you can use a container with class ui-grid-solo.

Solo Grid
<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Grid A</h1></div>
    <div class='ui-grid-a'>
        <div class='ui-block-a'><a class='ui-shadow ui-btn ui-corner-all'>Previous</a></div>
        <div class='ui-block-b'><a class='ui-shadow ui-btn ui-corner-all'>Next</a></div>
    <div class='ui-grid-solo'>
        <div class='ui-block-a'><input type='button' value='More'></div>

    <div data-role='footer' data-position='fixed'>
Try The Code Solo Grid Output
Series Navigation<< jQuery Mobile: Multiple Row Grids
jQuery Mobile: Inline only buttons using Icons >>

Leave a comment

Leave a Reply