vertical buttons alignment in jquery mobile

Question

Hi i'm working on Mobile app. I want these 3 buttons to align vertically one below the other. what happens is , once i put them in a div (with class="footer") , the button width size changes automatically.

<div class="footer" data-role="footer" data-id="fixedFooter" data-position="fixed" style="display:none;" >
<div style="text-align:center; width:100%;">
  <input type="button" value="Button">
</div>
<div>
  <input type="button" value="submit">
</div>
<div>
  <input type="button" value="cancel">
</div>

Answer 1

You need something like this: http://jsfiddle.net/Gajotres/a5USz/

HTML:

<div data-role="footer" data-position="fixed">
    <div class="button-holder">
        <input type="button" value="Button"/>
    </div>
    <div class="button-holder">
        <input type="button" value="submit"/>
    </div>
    <div class="button-holder">
        <input type="button" value="cancel"/>
    </div>
</div>

CSS:

.button-holder {
    text-align:center; 
    width:100%;   
}

.button-holder .ui-btn {
    width: 100% !important;
}

Add margin: 0 if you want to make them side by side, like this:

.button-holder .ui-btn {
    width: 100% !important;
    margin: 0 !important;
}