CODEWITHSUNDEEP
jquery-mobile
NotQuiteThereYet
NotQuiteThereYet

Reputation: 497

Possible to make 'controlgroup' buttons full width?

(using jQuery Mobile version 1.3.0)

I'm trying to make a group of vertical controlgroup buttons stretch the full width of the screen. I've tried adding "width: 100% !important; margin: 0 !important" to them, as well as to their container, but that doesn't make any difference.

<div class="content" data-role="content">

    <div data-role="controlgroup" data-type="vertical" >
        <a href="#" data-role="button">Button1</a>
        <a href="#" data-role="button">Button2</a>
        <a href="#" data-role="button">Button3</a>
    </div>

</div>

Been searching online for a solution for a few hours now, but haven't come up with anything.

Any ideas how to accomplish this?

FYI, I know how to make full-width buttons using "data-role=listview", but I would prefer to do it using 'controlgroup' for this particular project, if it's possible.

Thanks

Upvotes: 0

Views: 92

Answers (1)

ezanker
ezanker

Reputation: 24738

The content DIV in jQM has a 15px padding by default, so the controlgroup div leaves 15px on the right and left. You can remove the padding with the following CSS:

.ui-content{
    padding-left: 0;
    padding-right: 0;
 }

Here is a demo: http://jsfiddle.net/ezanker/y52y9/

Upvotes: 1

Related Questions