jQuery UI Theme too big

G

6

25

When I download a jQuery-ui theme, what do I have to add to get the defaults looking the same as in the jQuery-ui demo page?

The dialog I'm seeing out of the box is HUGE (see below). I know all the css is available to me from the demo page, but I'm not really a CSS expert, and don't know what to take, and what to leave.

enter image description here

EDIT

Here's a jsFiddle link showing the same.

EDIT

Greenling answered 1/9, 2011 at 21:35 Comment(6)

I think you need theme roller for that... have you looked here? – Thug 1/9, 2011 at 21:50

Do you have any CSS of your own set? – Wernher 1/9, 2011 at 21:50

@Joseph, I'm using the pre-canned Redmond theme from the theme roller. I've tried what it's given me, and also the google-shared version of the same. Both result in this bloated dialog <link rel="Stylesheet" type="text/css" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/…" /> – Greenling 1/9, 2011 at 21:54

@Wernher - I tried removing ALL other css anywhere else on my page—no change. – Greenling 1/9, 2011 at 21:54

can we see a demo or jsfiddle.net? – Thug 1/9, 2011 at 21:55

@Joseph: jsfiddle.net/w92TY – Greenling 1/9, 2011 at 22:0

T

27

I see what the issue is :P

body{font-size:10px;}

The sizes are relative to the page (more of a fluid layout). So (at least in the fiddle) changing the font-size of the body fixes it. Just change your pages' font sizes and the dialog will change with it.

http://jsfiddle.net/hnBmC/

Thug answered 1/9, 2011 at 22:6 Comment(2)

Thank you! I don't normally ask follow-up questions, but I think this is related: how do I revert to the browser's default font-size elsewhere? Right now I apply this class .defaultText { font-size: 14px; } to the div that has most of my content. Is there something I can put instead of font-size: 14px that will revert the text to what it would otherwise be? – Greenling 1/9, 2011 at 22:18

You can get the user's default font size with medium as the value. See here. Thus you would use font-size: medium; – Thug 2/9, 2011 at 12:57

U

41

The best way is : change base jQuery-ui font-size:

.ui-widget{font-size:12px;}

See this fiddle for an example.

Unshod answered 11/12, 2012 at 13:18 Comment(3)

This should be the marked answer since it affects only the JQuery UI elements and not all in the body like the marked solution. – Pocosin 10/10, 2013 at 19:36

don't forget to add !important attribute. .ui-widget{font-size:12px !important;} – Amplify 21/3, 2014 at 6:53

-1: Changing just .ui-widget is NOT enough. Check the jquery-ui.css file for font-size settings - there are lots that use various multiple of em. You'd have to change ALL of them to get something consistent. Better to set a single font-size in an enclosing container, such as a <div>. – Odorous 10/12, 2015 at 23:12

T

27

I see what the issue is :P

body{font-size:10px;}

The sizes are relative to the page (more of a fluid layout). So (at least in the fiddle) changing the font-size of the body fixes it. Just change your pages' font sizes and the dialog will change with it.

http://jsfiddle.net/hnBmC/

Thug answered 1/9, 2011 at 22:6 Comment(2)

Thank you! I don't normally ask follow-up questions, but I think this is related: how do I revert to the browser's default font-size elsewhere? Right now I apply this class .defaultText { font-size: 14px; } to the div that has most of my content. Is there something I can put instead of font-size: 14px that will revert the text to what it would otherwise be? – Greenling 1/9, 2011 at 22:18

You can get the user's default font size with medium as the value. See here. Thus you would use font-size: medium; – Thug 2/9, 2011 at 12:57

M

1

For this dialog header issue you can simply add the below attribute to the dialog's parent class

.ui-dialog { clear: both; }

For reference, jQuery UI Dialog Titlebar too tall

Mich answered 27/5, 2013 at 12:8 Comment(1)

Changing document flow doesn't affect text size - you need to do something to change font-size. – Odorous 10/12, 2015 at 23:14

O

1

If you look at themeroller.css with your favourite web page inspector then you'll find this:-

#themeroller {
    font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
    font-size: 12px;
}

A bit of digging in the HTML reveals that <div id="themeroller"> encompasses the entire "demo" area of the page so ALL the jquery-ui widgets are inside it and therefore take their font-sizes relative to these values.

Looking at my "too big" page, normal text has a font-size of 18px. This comes from .ui-widget in themes/ui-darkness/jquery-ui.css having font-size: 1em which it calculates from my browser's base font size of 16px. I discovered this base size by inspecting a simple document:

<html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>

So the answer to the question of how to set the font size for jquery-ui widgets is to set the font-size for an enclosing element. <body> (as recommended by Joseph Marikle) is guaranteed to hit everything but might be too wide for your needs, in which case you should use an inner <div> instead. <span> is probably evil because you shouldn't wrap block-level things in non-blocks - but check that assertion with the CSS Style Police, I'm just a hacker!

I was going to rant about why the designers chose to base heights on em, which is a width, rather than ex, which is a height. However, I suspect the answer is that em gives you more consistent results over a wider range of fonts, as most times the height of an 'l' is about the same as the width of an 'm'. Conversely, if you used 2ex as your basic measure then you'd get weird heights in fonts with very short or very long ascenders and descenders when compared to the height of an 'x'.

Odorous answered 10/12, 2015 at 23:35 Comment(0)

V

0

jquery ui is a framework you can modify it by creation new or existing theme:

/*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 1em 0.3em;
    position: relative;
}

Verticillate answered 1/9, 2011 at 22:7 Comment(1)

it's not the padding... it's the font-size of .ui-widget – Thug 1/9, 2011 at 22:8

A

0

you can use this css rule to apply smaller font size:

.ui-dialog{font-size: 62.5%;}

Arch answered 4/8, 2014 at 10:17 Comment(1)

There are more classes affecting font-size than .ui-dialog - look in the jquery-ui.css file for font-size to find them all. – Odorous 10/12, 2015 at 23:15

Recommended topics

Hot tags