increase height of jQuery Mobile buttons

Question

I'd like to increase the height of a few buttons created in jQuery Mobile, but CSS like the following is not working:

a[data-role="button"] {
  height: 200px;
  font-size: 48px;
}

Is there another way to do this? Perhaps apply a new height dynamically using jQuery and then call a function to redraw the button?

Answer 1

This worked for my jQuery mobile app:

.ui-btn { height: 200px; font-size: 48px; }

But make sure that the css is occurring after the jquery mobile css is loaded (specifically: jquery.mobile.structure.css )

If it still gives you trouble, try wrapping the buttons in a container and use:

#container-id .ui-btn { height: 200px; font-size: 48px; }

If it STILL gives you trouble, you can always (not recommended) use an !important statement:

.ui-btn { height: 200px !important; font-size: 48px !important; }

But again, "important" statements are REALLY not recommended, i usually only use them as sanity checks to make sure I am selecting the right element while debugging.

EDIT:

If you want the dynamic route:

jQuery code:

$(document).ready(function() {
  styles = { 'height': '200px', 'font-size': '48px' };
  $('.ui-btn').css(styles);
});

Should work... although now that I think about it I think jquery mobile does some javascript processing (I know it wraps your markup in a div with a reference to the current page url).

Answer 2

The code below worked for me. If your button is:

    <a href="index.html" data-role="button" data-theme="d" class="big">Big button</a>

Then big and ui-btn-inner can have the following styles:

    .big { height: 80px;}
    .big .ui-btn-inner { padding-top:25px; }

Added padding so the text would appear to be center-aligned. This way the button style doesn't change globally and you have the control where you want to change the button. Hope it helps someone :)