Friday, June 29, 2012

Asp.net jQuery UI Change Button Size / Button Text Font Size


In jQuery UI, the size of the button is controlled by the font size of the text inside the button, hence to change the size of the buttons we will have to change the font of the text inside the buttons.

If we try to set the width/height properties to the button directly without changing the text size then the button text will slip outside the button control, hence make sure that you change only the button text font settings and not the button width/height settings.

To alter the font settings open the jquery-ui-1.8.21.custom.css file and add font-size to the .ui-button class as follows.

.ui-button { font-size: 0.9em; display: inline-block;}

The above change will affect only the button controls, if you want the change to be applied to other widgets then change the settings in the .ui-widget class, as follows.

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.0em; }

The default font size for the .ui-widget class is 1.1em, you can change it as required, and here I have changed it to 1.0em.

Search Flipkart Products:
Flipkart.com

No comments: