ak. ak. - 6 months ago 14
Javascript Question

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...

Answer

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