Search code examples
javascriptjqueryhtmlcssjquery-mobile

Making a vertical button list in JQM


I'm trying to make a vertical button list on my main content page, when each button transfers you to another page.

But every time I try to put them one on top of the other they are extremely long, because of the default JQM settings.

This my code atm:

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true"  class="buttons">
<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button"  data-icon="info"  data-transition="pop" data-inline="true">Sign in</a>
<a href="#popupRegister" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check"  data-transition="pop" >New user? Sign Up!</a>
<a href="#"  data-role="button" data-inline="true" data-icon="star"  data-transition="slideup" >Return a car</a>
<a href="#directions_map" class="show-page-loading-msg" data-role="button" data-inline="true">Map and routing</a>
<a href="#catalog" data-role="button" data-inline="true">Car Catalog</a></p>
</fieldset>

Solution

  • try putting <br> at the beggining of each button and </br> at the end of each button to be more specific here is an edited version:

        <fieldset data-role="controlgroup" data-type="vertical" data-mini="true"  class="buttons">
    <br><a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button"  data-icon="info"  data-transition="pop" data-inline="true">Sign in</a></br>
    <br><a href="#popupRegister" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check"  data-transition="pop" >New user? Sign Up!</a></br>
    <br><a href="#"  data-role="button" data-inline="true" data-icon="star"  data-transition="slideup" >Return a car</a></br>
    <br><a href="#directions_map" class="show-page-loading-msg" data-role="button" data-inline="true">Map and routing</a></br>
    <br><a href="#catalog" data-role="button" data-inline="true">Car Catalog</a></br></p>
    </fieldset>