jquery - Can't over-ride certain css objects theme in the .dialog() widget -
i'm having trouble overriding css theme .dialog() box. followed instructions here http://api.jqueryui.com/dialog/#theming , not able resolve issue. using dialogclass option .dialog() widget should append styles apply them, this:
javascript initialization:
$("#modal").dialog({ dialogclass: "css" }); html:
<div id="modal"></div> css:
.css .ui-dialog-content { border:1px solid #ddd; background-color:#333; padding:50px !important; } ok documentation says can style .ui-dialog-content class , objects, , works, somewhat. border , background-color works, padding doesn't work because it's styled in element.style , using !important doesn't over-ride it, it's not letting me change pre-existing settings modal classes, when using !important, wondering if knows how work, starting getting padding work on .ui-dialog-content class.
you can see fiddle here: http://jsfiddle.net/tsy52/
lets take min-height example.
it has inline style of min-height:28px
if want change adding css class not specificity inline styles greater of css
the order goes way
!important > inline styles > class property using !important bad pattern , has avoided. in such cases set css property on element directly.
$('.ui-dialog-content').css("min-height", "100px") after dialog initialized.
Comments
Post a Comment