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
Print
Digg
StumbleUpon
del.icio.us
Facebook
Yahoo! Buzz
Twitter
Google Bookmarks
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.
[...] Reliance on em as the unit of measure rather than pixel. I realize there are lots of advantages to this, but it has its drawbacks too- most notably, when you nest some UI elements you can end up with different font-sizes, due to the use of 1.1em in some cases (this is a multiplier, so in my app I have 1em applied, which results in a font size of 11px, then I have a tab with content. The text in that content comes out at 12.1px (1.1em). If you don’t understand em versus px, try this article. Also, see my post on using 62.5% on a body CSS selector.. [...]
thx! exactly what i was looking for
[...] I know you may think I’m beating a dead horse, as this issue has already been discussed here and here, but I just wanted to add my take on the issue. This entry was posted in Uncategorized. [...]
A slightly more convenient way of doing the same thing, w/o touching generated css file, is to override
the entry after loading the standard css, by including the following in the source or your own css:
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana,
Arial, sans-serif; font-size: 11px; }
Thanks! Great suggestion.
Hey, this helped a lot! Thanx!
So far, this is what works best for me with both datepickers and dialogs without editing the ui.theme.css (and is the most zoom and ADA friendly):
div.ui-widget {font-size: 62.5% !important;}
Without the “div” the percentage is applied twice to inner ui widgets such as dialog buttons making them tiny. The “!important” is not really needed in my situation but is there just in case. As I begin to work it other jQuery UI objects I may find exceptions but, like I said, this works well for me for now.
Ignore my last post — I was in quirks mode (who knew?) — the content behaves much differently in the dialog in quirks mode and I got way off track. Anyhow, long story short, I eventually decided on the following if you don’t like the default font size in ui.theme.css:
div.ui-widget {font-size: 1em;}
div.ui-datepicker {font-size: 70%;}
div.ui-dialog-buttonpane {font-size: 80%;}
… and so on…
This allows full-size content in the dialog with smaller dialog buttons and a small datepicker. This also works well in quirks mode and standards mode.
Thanks!
Thanks, it was really helpful
Very helpful. Thanks!