« 
 »
Mar 03 2009

How to scale the jQuery UI font size for just the UI widgets

Posted by fbloggs in jQuery

This 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: , ,

This entry was posted on Tuesday, March 3rd, 2009 at 1:24 am and is filed under jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “How to scale the jQuery UI font size for just the UI widgets”
  1. faaliyet says:
    August 31, 2009 at 12:51 pm

    I’ve changed as your solution. That’s fixed now. Many Thanks (:

  2. Deroude says:
    October 16, 2009 at 8:01 am

    … 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.

  3. fbloggs says:
    October 16, 2009 at 8:19 am

    Thank you! Great idea.

  4. The jQuery UI CSS Framework – Part 1: Intro and How To Style a Button says:
    March 19, 2010 at 12:13 am

    [...] 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.. [...]

  5.  
Leave a Reply