I’ve become a convert to a new programmers’ tool called JQuery –a library of user-friendly javascript functions that allow for some very advanced effects that overlay seamlessly over a standard HTML page. However, I did encounter an issue when using the UI widgets –a set of effects such as a calendar (date picker) a pop up dialog box, checkbox buttons and so forth. The widgets looked great on the demo site, but when I integrated them into my site, they were huge, oversized bulging monsters.
When I found the fix for shrinking them back to the right size it turned out to be pretty easy, but oddly enough I haven’t seen it mentioned elsewhere, so here it is:
Open the stylesheet for the jQuery theme you are using. Find
.ui-widget
and add “font-size:10pt” to its parameters. This adds a baseline size to all jquery widgets, and everything else in the style sheet is calculated in relationship to that size.
Just for reference, here’s what it looks like in theme I’m currently using, “Start”.
/* Component containers
———————————-*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 10pt; }