Question

I have am attempting to add some input fields to a jquery ui dialog box and am having trouble applying styles to them.

Currently I have something like this:

<div id="dgNew" title="New Client" >
<fieldset>
    <legend>Add a New Client</legend>
    <div><label class="left-lbl" for="clientCode">Code</label><input class="input-md" type="text" id="clientCode" name="Code" disabled="true" /></div>
    <div><label class="left-lbl" for="ClientName">Client Name</label><input class="input-md required" type="text" id="ClientName" name="ClientName" /></div>
</fieldset>

The css I have to style this is not getting picked up. If I move the fields to just display on the page (not in the dialog) then the styles I have applied to left-lbl, right-lbl, etc. get picked up fine.

If I examine the dialog in firebug the styles are there on the elements but do not show as having been applied. Is there something I need to do specific to jquery ui to make this work?

Answer 1

Ok, problem solved. This was just a stupid mistake on my part. I had the style applied to all class within a wrapper div on my page but the dialog’s div is declared outside of the wrapper and so it wasn’t picking them up.

#wrap label.left-lbl

instead of just

label.left-lbl