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