Geek Answers Handbook

Problem with jquery dialog when using themeroller css

demos for the jquery ui dialog use the theme "flora". I wanted to customize the theme, so I used themeroller to generate the css file. When I used it, everything seemed to work fine, but later I found that I could not control any input element contained in the dialog box (i.e., I could not enter a text field, I could not check the checkboxes). Further research showed that this would happen if you set the dialog attribute “modal” to true. This does not happen when I use the theme of flora.

Here is the js file:

topMenu = { init: function(){ $("#my_button").bind("click", function(){ $("#SERVICE03_DLG").dialog("open"); $("#something").focus(); }); $("#SERVICE03_DLG").dialog({ autoOpen: false, modal: true, resizable: false, title: "my title", overlay: { opacity: 0.5, background: "black" }, buttons: { "OK": function() { alert("hi!"); }, "cancel": function() { $(this).dialog("close"); } }, close: function(){ $("#something").val(""); } }); } } $(document).ready(topMenu.init);

Here is the html that uses the flora theme:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>sample</title> <script src="jquery-1.2.6.min.js" language="JavaScript"></script> <link rel="stylesheet" href="flora/flora.all.css" type="text/css"> <script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script> <script src="TopMenu.js" language="JavaScript"></script> </head> <body> <input type="button" value="click me!" id="my_button"> <div id="SERVICE03_DLG" class="flora">please enter something<br><br> <label for="something">somthing:</label>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24"> </div> </body> </html>

Here is the html that uses the downloaded themeroller theme:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>sample</title> <script src="jquery-1.2.6.min.js" language="JavaScript"></script> <link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css"> <script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script> <script src="TopMenu.js" language="JavaScript"></script> </head> <body> <input type="button" value="click me!" id="my_button"> <div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br> <label for="something">somthing:</label>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24"> </div> </body> </html>

As you can see, only css reference files and class names are different. Does anyone know what could be wrong?

@David: I tried and it does not work (neither on FF, nor on IE). I tried inline css:

 style="z-index:5000"

and I also tried this, citing an external css file:

 #SERVICE03_DLG{z-index:5000;}

But none of these works. Am I missing something in what you suggested?

Edit:
Solve by brostbeef!
Since I originally used flora, I mistakenly assumed that I should specify a class attribute. It turns out that this is true only when you actually use the theme of flora (as in the samples). If you use a custom theme, specifying a class attribute causes this strange behavior.

+6
javascript jquery user-interface dialog
source share
4 answers

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

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

I already made modals, and I did not even define a class in the tag. jQueryUI should take care of this for you.

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

+3
source share

After playing with Firebug, if you add the z-index attribute greater than 1004 to your grandfather by default, the id from "SERVICE03_DLG", then it will work. I would give him something extremely high, like 5000, to be sure.

I'm not sure what exactly in the themeroller CSS it causes. They probably changed or ignored the position attribute of the target div so that it turns into a dialog.

+1
source share

I tried to implement a themeroller theme with a dialog and tabs, and it turned out that the CSS tester does not work with official jQuery ! Especially for dialogs and tabs, they modified element classes from official jquery. Take a look here: http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/

User Comment:

3) the generated theme that I downloaded seems to be incomplete - when I try to use it in my tabs (which work with the theme of flora, the code is identical to the example documentation) they don’t get the tab style

Running into 3, I thought that I was stuck and should have "flora" ... Since then, I found reading the source code of the "demo" file, if I configure my html and give <li> elements that I use for my tabs class is "ui-tabs-nav-item", then it will work.

The theme created by themeroller is unfortunately incomplete. If the tab material is incomplete, it makes me wonder what else is incomplete. It was pretty unpleasant. :(

followed by a comment by theeroller developers:

3) Take a good look at this. It is correct that these classes must be added by the plugin. For now, though, it probably wouldn't hurt to just add them to your markup so you can use themeroller themes. Ok, check it out. I think our selectors may be based on the parent ui-tabs selector instead, but I think we tried not to use elements in our selectors. View it on the to-do list

+1
source share

Man, this is a good one. I tried to do a bunch of things on these two pages. Have you tried just leaving CSS at all and trying both pages? I used Firebug to remove the CSS from the header on both pages, and the input still worked on one and not the other, but I tend to believe that Firebug does not completely remove the CSS from the rendering, and you "I get different results if you really remove it from the code.

I also found that you can paste text into the text field with the mouse - it simply will not accept keyboard input. There seems to be no event handler on it that would interfere with this.

0
source share

More articles:


All Articles