increase height of jQuery Mobile buttons

jquery-mobile

Solution

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).

Problem

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?

Original source