ansaurus

Question

(Why) does jQuery make my slider look fat?

Answer 1

+3 A:

All jQuery UI widgets have theming instructions associated with them. The instructions for the slider widget mention certain CSS classes that are assigned to the slider handle.

Looking at the jquery-ui.css (or ui.slider.css if you are using the development package) you can see that the default CSS is something like:

.ui-slider .ui-slider-handle {
  width: 1.2em;
  height: 1.2em;
}
.ui-slider-horizontal .ui-slider-handle { 
  top: -0.3em;
  margin-left: -0.6em;
}

You can override these CSS rules to create a handle of any size.

Edit

I've produced basic slider functionality here: http://jsbin.com/otika3 (Editable via http://jsbin.com/otika3). Please try and reproduce your problem on http://jsbin.com and share the public link with us.

Full source:

<!doctype html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  <title>http://stackoverflow.com/questions/1616675&lt;/title&gt;
  <style type="text/css" media="screen">
    html, body, #content { height: 100%; }
    body { background-color: #000; font-size: 62.5%; color: #fff; }
    #content { width: 700px; margin: 0 auto; border: 1px solid white; padding: 1em;}
    #slider { width: 200px; }
  </style>
</head>
<body>
  <div id="content">
    <div id="slider"></div>
  </div>
  <script>
    $('#slider').slider();
  </script>
</body>

brianpeiris 2009-10-24 01:49:31

Beat me to it. Didn't have the source code handy on my phone. ;)

Nathan Taylor 2009-10-24 01:52:48

Lol, you answer SO questions from your phone!? That's badass :P

brianpeiris 2009-10-24 01:54:30

Thanks Brian, that is a help. However, I recently downloaded and have included on the page the jquery-ui Themebuilder css file for one of their themes. When I look at this theme on the themebuilder site (it's the theme called Smoothness, URL is too long for cut-and-paste) the slider looks "correct". Any idea why it would be different on my machine?

Larry Lustig 2009-10-24 01:56:31

If you downloaded jQuery UI from http://jqueryui.com/download there should be an index.html included in the zip file. Does the slider look different ("incorrect") when you open that file in the browser? If it doesn't, there is something in your code (that you haven't shown us) interfering with the CSS.

brianpeiris 2009-10-24 02:10:15

No, the slider on the jquery-ui-index.html page looks "correct". When I examine "my" slider in firebug, it appears to have the correct classes applied by jquery, and those classes are in the jquery-ui css file.

Larry Lustig 2009-10-24 02:10:19

@brian: I have no doubt that you're correct, but I don't know what might be interfering. I've edited the question to include the header, in the event that the order of inclusion of the CSS or js files might be the problem. Other than that, the only thing I can think of (stressing that I'm just starting out with jQuery and CSS) would be trying to redefine the jQuery-ui classes in my CSS, which I'm not doing.

Larry Lustig 2009-10-24 02:17:23

As a quick test, try switching `memoryGame.css` and `jquery-ui-1.7.2.custom.css` and see if that makes a difference. If not, remove memoryGame.css and memoryGame.js independently and see what happens. FYI These are elementary debugging steps that you should take by yourself in order to isolate the problem.

brianpeiris 2009-10-24 02:23:04

@Brian. Thanks. Already tried switching the css files and removing my css file before I posted (also cut out many other extraneous elements to get the simplest possible case). memoryGame.js has my jQuery in it so I can strip it down, but I can't remove it completely.

Larry Lustig 2009-10-24 02:33:30

Also, using firebug to inspect the CSS applied to "my" slider and the one on the jquery-ui-index page, it looks like they're both receiving the same 0.8em height instruction from CSS and no superseding instruction for height. Indeed, all the CSS applied to the two sliders looks the same, except that the jquery-ui-index one inherits some font-related instructions and (could this be it) line-height: normal from <body>, which doesn't happen on my page.

Larry Lustig 2009-10-24 02:37:44

@Larry Good to see you've taken the basic debugging steps (frankly, I couldn't tell from your question). line-height doesn't seem to have an effect. Of course if you have indeed pared down your code to the basic possible case and the problem still exists then, logically, you should already know what the problem is! ;) Ideally you should be able to reproduce the problem on a publically accessible website or on http://jsbin.com so that we can get at the core of the problem. I've edited my answer with code that produces basic slider functionality. Please try an augment it to reproduce the issue.

brianpeiris 2009-10-24 02:59:51

@Brian: cool site, trying it now.

Larry Lustig 2009-10-24 03:18:02

@Brian: I put together a simple slider at http://jsbin.com/ijehu/ and it's "fat" like the one I have here. However, my example doesn't have all the CSS your example has, so by looking at what I left off I'm sure I'll figure out the problem.

Larry Lustig 2009-10-24 03:25:01

@Brian, Jourkey hit it in his/her answer. I was missing a font-size directive that you included in the <body> CSS. The font-size directive also scales the thickness of the splitter. Thanks for your patient help.

Larry Lustig 2009-10-24 03:35:04

Answer 2

+2 A:

The slider size is controlled by the 'font-size' css property. You want to decrease the font-size of the parent element.

Jourkey 2009-10-24 03:13:48

Thank you, that is exactly correct. Reducing the font size to 62.5% (the number cribbed from Brian's example above) produced an effect matching the jquery-ui demo. For my own education, can you explain the CSS mechanism through which the font-size instruction affects the height of the slider?

Larry Lustig 2009-10-24 03:32:55

+1 Jourkey is correct, the `font-size` property set in a parent element does affect the size of the slider. This is because the default rules in `jquery-ui.css` use the `em` unit to define the slider dimensions. Since `em` units are relative to the that of the parent element(s), changing the font-size in the `body` changes the dimensions of the slider. **However**, a more appropriate fix would be to explicitly define new CSS rules for the slider as I described in my answer, rather than changing the `font-size` in the `body`, since that would affect the whole page.

brianpeiris 2009-10-24 03:40:08

@Brian, @Jourkey thanks both. @Brian, I think it will be a while (a few more hours, at least) before I'll feel comfortable overriding the jquery-ui supplied styling. This is a learning project for me (as, no doubt, you can tell) and this Stackoverflow question was a big success in the sense that I learned a lot. Thanks for your help.

Larry Lustig 2009-10-24 03:44:26

ansaurus

tags:

views:

answers:

(Why) does jQuery make my slider look fat?

Edit

related questions