CODEWITHSUNDEEP
htmlcssjquery-mobile
Anto
Anto

Reputation: 4305

Filling the entire content area with buttons in JQuery Mobile

I am creating with JQuery Mobile a page containing a header, a content and a footer area. The entire content area must be split in two sections, 50% each, where each section must be a button, without any rounded corners or spacing, that can decrease or increase in size according to the device used and the layout of the device (portrait or landscape). I have tried several approaches, such as with data-role="controlgroup" and with data-type="horizontal" but it doesn't seem to provide what I want. Can someone tell me if it's possible in the first place and, if so, what elements and attributes should be used? Thanks in advance!

Upvotes: 1

Views: 228

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Here's a working example: http://jsfiddle.net/Gajotres/TfzPw/

This solution requires:

  1. jQuery Mobile grid (Omar mentioned it in his comment) 

    <div class="ui-grid-a">
    <div class="ui-block-a"><a data-role="button" id="custom-btn">Button Left</a></div>
    <div class="ui-block-b"><a data-role="button" id="custom-btn">Button Right</a></div>
</div><!-- /grid-a -->

    Official documentation: http://jquerymobile.com/demos/1.3.0-rc.1/docs/content/content-grids.html

  2. Remove rounded corners:

    $(document).on('pagebeforeshow', '#index', function(){       
    $('a').buttonMarkup({ corners: false });
});

    Official documentation: http://jquerymobile.com/demos/1.3.0-rc.1/docs/buttons/buttons-options.html

  3. Remove padding on a content div:

    #index-content {
    padding: 0 !important;
}

  4. Remove button margines:

    #custom-btn {
    margin: 0 !important;
}

Upvotes: 2

Related Questions