How to scale the jQuery UI font size for just the UI widgets
Posted by fbloggs in jQueryThis post applies to jQuery UI 1.6rc6 (the preview for jQuery 1.3+), but it probably also works with earlier versions.
If you use themeroller, or simply download the jQuery UI standard code package from the jQuery UI web site, the default font size is set to 1.1em, which, generally speaking, is way too large for most people’s tastes. I’ve seen a less than helpful suggestion on how to adjust this, on the examples pages:
<body style="font-size: 62.5%;">
This is pretty bogus, because text inside input boxes doesn’t rescale (at least, not in FireFox,) and it obviously applies to the entire page, when in fact you may want it to just apply to the UI widgets only. You can adjust the scale very easily, though, for all widgets, by editing the ui.theme.css file (in the ‘theme’ directory). Just change the font-size property for the .ui-widget selector. The default is 1.1em. I changed mine to 11px. Like this:
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana,
Arial, sans-serif; font-size: 11px; }
There’s a second line, with more specific selectors: .ui-widget input, select, textarea and button respectively. You will probably want to change that line too.
Tags: CSS, JavaScript, jQuery
Entries (RSS)
I’ve changed as your solution. That’s fixed now. Many Thanks (:
… or, if you use themeroller and don’t need to / want to / cannot edit your ui.theme.css file, appens “.ui-widget{font-size:11px !important;} to your own style sheet.
Thank you! Great idea.