change font size of button text in jQuery mobile

Question

I have 2 jQuery mobile buttons inside a fieldset and would like to change the font-size of one of the buttons. I have tried adding an inline style but that did not work.

I have also tried this but that did not work as-well:

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

This is what is happening: (only on the iPhone)

Because the screen size of the iPhone, the "Request Change" button is being cut-off.

Is there a way for me to change the font-size of the button text so that it shows the complete text without getting cut-off?

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 have tried:

• jquery mobile button text auto line break
• Change font size of a jQuery Mobile button at runtime

Solution 1

Play with the following to find what's 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 */
}

Solution 2

Live Example:

• http://jsfiddle.net/Pjvvx/ (Width)
• http://jsfiddle.net/3DSGT/ (Height)

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're looking 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>

Related:

• resizing a BUTTON through CSS

Comments

[Farhan Ahmad]

Exactly what I was looking for. Thanks :)

[Farhan Ahmad]

This was a good solution but in my case, Nirmal's solution worked better for me. Thanks for your help :)

[Mithun Satheesh]

@Nirmal Patel : should this be text-overflow: inherit; instead of initial?

[dsdsdsdsd]

the problem with this is that it affects all buttons

[Nirmal Patel]

initial or clip (default for text-overflow)

[Nirmal Patel]

For styling only particular buttons, make these styles specific to a parent container for your buttons.