Geek Answers Handbook

Change font size of button text in jQuery mobile

I have 2 jQuery mobile buttons inside a fieldset and would like to change the font-size one of the buttons. I tried to add an inline style, but that didn't work.

I also tried this, but this did not help:

 .myButton { word-wrap: break-word !important; white-space: normal !important; }

This is what happens: (iPhone only)

enter image description here

Due to the size of the iPhone’s screen, the Change Request button is disabled.

Is there a way to change the font-size text of the button text so that it displays the full text without interruption?


HTML:

 <fieldset class="ui-grid-a"> <div class="ui-block-a"> <input data-mini="true" type="submit" value="Cancel" name="Submitbutton" class="button button-link"/> </div> <div class="ui-block-b"> <input data-mini="true" data-theme="b" type="submit" value="Request Change" name="Submitbutton" class="button button-link" /> </div> </fieldset>

I tried:

+4
source share
2 answers

Play with the following to find what is best on the iPhone screen.

 .ui-btn-inner{ text-overflow: initial; /* Get rid of the ellipsis */ padding-left: 5px; /* Play with padding to make max use of available button width */ } .ui-btn-text { font-size: 15px; /* Play with font size of the text */ }
+9
source

Live example:

JS:

 // For all buttons use something like this $('.ui-btn').css('width','50%'); // For individual buttons use something like this $('#theButton1').parent().css('width', '75%'); // Or this for HREF data-role buttons $('#hrefButton4').css('width', '45%'); // this changes the height for all buttons $('.ui-btn-text').css('font-size','50px'); // This changes the height for a single element $('#hrefButton3').children().children().css('font-size','30px');

I think you want to do something like this:

 $('#hrefButton3').children().children().css('font-size','10px');

HTML:

 <div data-role="page" id="home"> <div data-role="content"> <input type="button" id="theButton1" value="Press Me 1" /> <input type="button" id="theButton2" value="Press Me 2" /> <input type="button" id="theButton3" value="Press Me 3" /> <input type="button" id="theButton4" value="Press Me 4" /> <br /> <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a> <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a> <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a> <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a> </div> </div>

Connected:

+2
source

More articles:


All Articles