A problem with the jquery dialog when using the themeroller css

Question

Hello,

The demos for the jquery ui dialog all use the "flora" theme. I wanted a customized theme, so I used the themeroller to generate a css file. When I used it, everything seemed to be working fine, but later I found that I can't control any input element contained in the dialog (i.e, can't type into a text field, can't check checkboxes). Further investigation revealed that this happens if I set the dialog attribute "modal" to true. This doesn't happen when I use the flora theme.

Updated: (removed the code and added links instead)

Here are the two links for comparison:

http://ovesh.limon100.com/quicksample/TopMenu.html

http://ovesh.limon100.com/quicksample/TopMenu2.html

As you can see, only the referenced css file and class names are different. Anybody have a clue as to what could be wrong?

@David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:

style="z-index:5000"

and I've also tried it referencing an external css file:

#SERVICE03_DLG{z-index:5000;}

But neither of these work. Am I missing something in what you suggested?

Edit:
Solve by brostbeef!
Since I was originally using flora, I had mistakenly assumed that I have to specify a class attribute. Turns out, this is only true when you actually use the flora theme (as in the samples). If you use the customized theme, specifying a class attribute causes that strange behaviour.

Answer 1

The only thing I can think of that could cause issues like this would be a z-index, but if the inputs were being displayed behind the modal window, you wouldn't even be able to see them to know the checkboxes weren't checking. Can you post your themeroller CSS file?

Answer 2

Can you put a live example of your code up? The HTML markup doesn't really help as this is most likely a CSS (probably zIndeX) issue.

jQuery UI and themeroller are both young technologies and very buggy. I've had to go in and fix numerous bugs with the dialog and UI code since I decided to use jQuery UI for some production code I've been writing.

Answer 3

Updated: I've put up 2 links instead of the code

Answer 4

After playing with this in Firebug, if you add a z-index attribute greater than 1004 to your default div, id of "SERVICE03_DLG", then it will work. I'd give it something extremely high, like 5000, just to be sure.

I'm not sure what it is in the themeroller CSS that causes this. They've probably changed or neglected the position attribute of the target div that it turns into a dialog.

Answer 5

Man, this is a good one. I've tried doing a bunch of things on these two pages. Have you tried just leaving the CSS out altogether and trying both pages then? I used Firebug to remove the CSS from the header on both pages, and the input still worked on one and not on the other - but, I'm inclined to believe that Firebug doesn't completely remove the CSS from the rendering, and you'll get different results if you actually remove it from the code.

I also found that you can paste text into the text box using the mouse - it just won't accept keyboard input. There doesn't seem to be any event handler on it that would interfere with this, though.

Answer 6

I tried implementing a themeroller theme with a dialog and tabs and it turns out that the themeroller CSS doesn't work with official jQuery! Especially for dialog and tabs, they modified the element classes from the official jquery ones. See here: http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/

A user's comment:

3) the generated theme that I downloaded seems to be incomplete - when I attempt to use it my tabs (which work with the flora theme, code identical to the documentation example) do not get styled as tabs

Having run into 3 I thought I was stuck and would have to revert using “flora"… I have since discovered by reading the source code of the “demo” file that if I adjust my html and give the < li> items I’m using for my tabs the “ui-tabs-nav-item” class then it will work.

The theme generated by themeroller is thus unfortunately incomplete. If the tabs stuff is incomplete, it makes me wonder what else is incomplete. It was rather frustrating. :(

followed by the themeroller developers comment:

3) We’ll take a look at that. You’re right that those classes should be added by the plugin. For now though, it probably wouldn’t hurt much to just add them to your markup so you can use themeroller themes. We’ll check it out, though. I think our selectors could be based off of the parent ui-tabs selector instead, but I think we were trying not to use elements in our selectors. Consider it on the to-do list

Answer 7

I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)

Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.

I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.

Try getting rid of the class attribute or using the "ui-dialog" class.

Answer 8

Custom Themeroller CSS still not working with regular jQuery is still an issue. Dailog and Tabs not able to work together properly. I am not able to post examples as my code is in an investment bank production/RD environment. Is this ever going to be fixed? Thanks in advance.