CODEWITHSUNDEEP
jquerymobilebuttonfont-size
ghenne
ghenne

Reputation: 1903

Change font size of a jQuery Mobile button at runtime

jQuery Mobile 1.1.1 changes how buttons are formed. Previously, I could set the font size of buttons like this:

<div id="Button1" data-role='button' data-inline=true data-theme=c 
 data-icon=false data-iconpos=none style="font-size:12px;">Button</div>

The font size attribute is being ignored in 1.1.1. It draws with the default font size (16px?). I can change the font size by adding this line of code:

$('#Button1').children().children().css('font-size','12px');

But now the vertical alignment of the text is off: it aligns with the original font size text's lower boundary.

Any ideas?

Upvotes: 2

Views: 4013

Answers (3)

ghenne
ghenne

Reputation: 1903

This sets the font size:

$('#Button1').children().children().css('font-size','12px')

To center the text, you will also want to change the padding:

$('#Button1').children().css('padding','6px')

(tested with jQuery Mobile 1.2)

Upvotes: 1

Samik R
Samik R

Reputation: 1638

Another solution I have found so far is adding { padding: 5px; } for the specific buttons. This works and the text is vertically aligned, but a second layer shows up around the button text. Don't know how to get rid of that.

See this thread which discusses the solution.

Upvotes: 0

BumbleB2na
BumbleB2na

Reputation: 10743

I think the conflict in font-size may be with whichever line-height jQuery Mobile 1.1.1 is setting. Will this fix it?

$('#Button1').children().children().css('font-size','12px').css('line-height','12px');

Edit - try setting line-height in the css, for all children of the #Button element:

#Button1 *
{
    font-size:12px !important;
    line-height:12px !important;
}

Upvotes: 0

Related Questions