Theming elements within a Jquery UI Dialog with CSS... how?

Question

Since the old version was apparently way too hard for people to understand, here's the HTML, CSS, and JavaScript combined:

$(document).ready(function() {
  $('#test').dialog({
    autoOpen: false,
    modal: true
  });
  $("#test-link").click(function() {
    $('#test').dialog('open');
  });
});

div#main div#test label {
  display: block;
}

div#main div#test input {
  padding-left: 100px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<div id="main">
  <p><a href="#" id="test-link">test</a>
    <p>
      <div id="test" title="Submit Bug or Feature Request">
        <form>
          <label for="test_desc">Short Description:</label>
          <input type="text" name="test_desc" id="test_desc" value="" />
          <input type="submit" name="" value="Submit" />
        </form>
      </div>

</div>

The dialog works fine, but the CSS does not. Any ideas why?

Jeremy Logan · Accepted Answer · 2009-06-19 02:00:03Z

1

JQuery moves a dialog's DIV in the DOM tree and wraps it in some others. Therefore the CSS selectors won't work. Using the above example you'd have to do something like this:

div.ui-dialog div#test label {
    display: block;
}
div.ui-dialog div#test input {
    padding-left: 100px;
}

answered Jun 19, 2009 at 2:00

Jeremy Logan

47.6k39 gold badges125 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tom · Accepted Answer · 2009-06-19 01:01:55Z

0

The css should work. It might be a problem with how the css rules cascade. Is there a more specific selector applying these rules like "#dialog div#test label"? Without the rest of html/css it's impossible to point out the specifics. Get firebug and see what rules are getting applied to those elements.

answered Jun 19, 2009 at 1:01

tom

2,07718 silver badges10 bronze badges

1 Comment

tom Over a year ago

Not sure why I got voted down here. The original question had incomplete information. It was a good guess based on the original info

Collectives™ on Stack Overflow

Theming elements within a Jquery UI Dialog with CSS... how?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related