jQuery | remove inline style

Summary: The jQuery.UI dialog widget can be called on a dynamically created <div />. In this case, the element will have its height set to 30px. A possible solution could be setting height to the empty string using the css() method.

Normally the jQuery.UI dialog is called on an existing element. But it can also be bound to a dynamically created element:
var confirmText = Would you like to edit this task as the administrator user?';

// dynamically create <div /> to call the dialog on
$('<div />').appendTo(document.forms[0])
 .attr('id', 'div1')
 .attr('title', 'Dialog Title')

// initialize the dialog
The resulting dialog assigns div1 to the message pane. But it also adds inline styling that squeezes div1 to the height of 30px, like this:
To fix this issue just remove the height style from div1:
$('#div1').dialog().css('height', '');
This seems to be a sensible solution as the docs (http://api.jquery.com/css/#css2) are saying:
Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or


Popular posts from this blog