Increase jQuery Mobile Button Height

Question

I would like to increase the height of several buttons created in jQuery Mobile, but CSS, as shown below, does not work:

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

Is there any other way to do this? Is it possible to dynamically use the new height using jQuery and then call the function to redraw the button?

Answer 1

This worked for my jQuery mobile app:

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

But make sure css occurs after loading jQuery mobile css (specifically: jquery.mobile.structure.css)

If this still causes problems, try wrapping the buttons in the container and use:

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

If STILL gives you problems, you can always (not recommended) use the important operator:

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

But then again, the “important” statements are REALLY not recommended, I usually use them only as a performance check to make sure that I select the correct item during debugging.

EDIT:

If you want a dynamic route:

JQuery Code:

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

This should work ... although now that I think about it, I think jquery mobile is doing some javascript processing (I know that it wraps your markup in a div with a link to the current page URL).

Answer 2

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

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

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

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

A padding has been added so the text will be centered. That way, the style of the button does not change globally, and you have a control in which you want to change the button. Hope this helps someone :)