CODEWITHSUNDEEP
jqueryjquery-mobilebutton
Sanya
Sanya

Reputation: 1280

jQuery Mobile buttons same size

Here's a fiddle ----> http://jsfiddle.net/bagofmilk/4RAuL/ <----

Using jQuery 1.9.1 with jQM 1.3.2

I have buttons in a footer setup like this:

 <div data-role='footer' data-position='fixed' data-inline='true'>
    <div class='ui-grid-d' style='width:100%;margin:0 auto;text-align:center;'>
        <div class='ui-block-a'>
            <a href='#'  data-inline='true' data-role='button' data-corner='false'>A</a></div>
        <div class='ui-block-b'>
            <a href='#'  data-inline='true' data-role='button' data-corner='false'>B</a></div>
        <div class='ui-block-c'>
             <a href='#'  data-inline='true' data-role='button' data-corner='false'>C</a></div>
        <div class='ui-block-d'>
            <select data-icon='grid' data-iconpos='notext' data-mini='true' data-inline='true' id='thissel'><option>D</option><option>2</option></select></div>
        <div class='ui-block-e'>
        <a href='#'  data-inline='true' data-role='button' data-corner='false' >&rarr;</a></div>
   </div>
 </div>

if you notice, you will see that the buttons surrounded by the <a> tags are larger than the button that only has the icon. I want to make all of the buttons the same size as the button with the icon='grid'.

I tried this:

.ui-btn {padding:0px;}

but it did not work

Any thoughts?

jsfiddle ----> http://jsfiddle.net/bagofmilk/4RAuL/ <----

Upvotes: 2

Views: 918

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/yFEsW/

CSS:

.ui-block-d .ui-select .ui-btn {
    margin-top: 2px !important;
    padding: 0.15em 5px 0.25em !important;
}

.ui-block-d .ui-select .ui-btn .ui-icon{
    margin-top: 5px !important;
}

or your version: http://jsfiddle.net/Gajotres/wye9H/

.ui-block-a a .ui-btn-inner, .ui-block-b a .ui-btn-inner, .ui-block-c a .ui-btn-inner, .ui-block-e a .ui-btn-inner {
    padding: 0 5px !important;
}

.ui-block-d div .ui-btn {
    margin-top: -2px !important;
}

to me first one looks better.

Upvotes: 1

Related Questions