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

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -