jQuery UI slider: how to inline it?

I'm trying to display several sliders with labels on the same line, eg:

Label1: [----O--]  Label2: [--O---]  Label3: [O-----]

All this content is created via JS:

var controls = $('<div></div>');
controls.append($('<b>Label1:</b>'));
controls.append($('<div></div>').slider({...}));
controls.append($('<b>Label2:</b>'));
controls.append($('<div></div>').slider({...}));
controls.append($('<b>Label3:</b>'));
controls.append($('<div></div>').slider({...}));
// insert controls in the DOM

What's the proper way to inline sliders? By default they are rendered as block elements and break lines accordingly. I tried changing CSS display:inline in this case the slider just collapses...

Answers


Use display:inline-block instead to keep it from collapsing. You may or may not need to use a set width after that.


Need Your Help

Can I (and do I ever want to) set the maximum heap size in .net?

.net garbage-collection heap performance

Coming from a java background, one of the things I am used to is telling the JVM what the maximum heap size should be. If the running program tries to swallow more than is allowed, and the garbage

Check for column and bind grid if exists or not

c# asp.net

How to bind data to itemtemplate of gridview at RowDataBound event. I am using a gridview and below is the code for that grid view.

Why does Ember.js lose the valueBinding when I use bootstrap datepicker?

twitter-bootstrap ember.js handlebars.js

I am noticing that in my application when I use the below code I am given a formatted date in my date picker widget but when I click search the console shows empty strings. However if I remove the