CODEWITHSUNDEEP
jquerycssjquery-mobile
Mor
Mor

Reputation: 229

jquery mobile -5 buttons in a row

Can anyone tell me please in JQuery Mobile how can I fit the size of a button to screen resolution, I mean if I have 5 buttons in galaxy S2 I see it in 1 row. but if I use some other phone with smaller screen it's spread over 2 rows.

how can I make the buttons to stay in 1 row? (and decrease the button/text size) in all screens ? I tried to do :

.ui-button{height:10%}

but it doesn't work ! any ideas? thanks :)

<div class="center-wrapper" style="margin-bottom:10px float:left ">
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 6 <a/>   
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 7 <a/>
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 8 <a/>
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 9 <a/>
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 10 <a/>    
</div>

Upvotes: 2

Views: 564

Answers (1)

ezanker
ezanker

Reputation: 24738

How about something like this: DEMO FIDDLE

Each button is contained in a DIV set to display inline with float: left and a width of 20% (5 in a row). In my example a media query is used to reduce font size when screen is less than 480px wide; you can tune to taste or choose to leave the font-size alone.

<div data-role="content">
    <div id="fiveButtons" class="center-wrapper" style="margin-bottom:10px float:left "> 
        <div class="b"><a class="c"  data-role="button" data-inline="true" style="margin: 1px;" > 6 </a> </div>  
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 7 </a></div>
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 8 </a></div>
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 9 </a></div>
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 10 </a></div>    
</div>        


#fiveButtons .b{
    display: inline;
    float: left;
    width: 20%;
}
#fiveButtons .c{
    width: 92%;
}
#fiveButtons  .ui-btn-inner {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
@media all and (max-width: 480px){
     #fiveButtons  .ui-btn-inner { font-size: 12px }
}

Upvotes: 2

Related Questions