A Issue With The Jquery Dialog When Using The Themeroller Css

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

Solution 1:

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.

Solution 2:

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.

Solution 3:

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

Solution 4:

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.