Comments on: How to scale the jQuery UI font size for just the UI widgets

By: bzt

bzt — Mon, 14 Nov 2011 14:56:08 +0000

Very helpful. Thanks!

By: Jaime

Jaime — Thu, 20 Oct 2011 21:20:15 +0000

Thanks, it was really helpful

By: Enrique

Enrique — Fri, 02 Sep 2011 18:28:22 +0000

Thanks!

By: juanitogan

juanitogan — Fri, 25 Mar 2011 23:47:07 +0000

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.

By: juanitogan

juanitogan — Fri, 25 Mar 2011 14:19:28 +0000

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.

By: Julian

Julian — Sat, 05 Mar 2011 19:51:47 +0000

Hey, this helped a lot! Thanx!

By: fbloggs

fbloggs — Tue, 21 Dec 2010 05:57:13 +0000

Thanks! Great suggestion.

By: Jiyang Xu

Jiyang Xu — Tue, 21 Dec 2010 03:28:59 +0000

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; }

By: My only jQuery UI complaint | Marcus McDuffie

My only jQuery UI complaint | Marcus McDuffie — Fri, 22 Oct 2010 20:11:50 +0000

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

By: ncorpse

ncorpse — Sun, 10 Oct 2010 16:16:43 +0000

thx! exactly what i was looking for