jQuery dialog with tabs font-size fix

While developing AspNetInfo I ran into a styling problem when using jQuery tabs nested in a dialog.  Notice in the dialog how the tab font-size is slightly larger than the tag font-size in the page.


This is because the dialog and tab widgets are decorated with the jQuery style .ui-widget, which specifies a relative font-size of 1.3em.

.ui-widget { 
    font-family: Arial,sans-serif; 
    font-size: 1.3em; 

The font-size of the nested tab widget ends up being larger due to CSS inheritance and relative font-size.  The tab widget inherits the dialog widget’s relative font-size making the nested tab widget items 1.69em in size (1.3em X 1.3em = 1.69em).

This can be fixed by specifying a more specific rule for the nested tab widget to bring all of it’s items back to 1.3em.  This rule can be applied to just the tabs by specifying the tab id or to all instances of nested widgets.

Fix for email tab only:

#emailTabs.ui-widget {
    font-size: 1em;

Fix for all widgets:

.ui-widget .ui-widget {
    font-size: 1em;

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.