There are numerous posts that indicate that the z-index of a jQuery UI dialog can be set by passing a parameter zIndex to .Dialog(), including
Last jQuery modal dialog z-index overrides initial modal z-index
However, that parameter is not listed in the jQuery UI API documentation
http://api.jqueryui.com/dialog/
If I set it anyhow, the z-index of my dialog is unaffected.
How can I set the z-index of the dialog?
It turns out that I was referencing a custom jQuery UI Theme built for an old version of jQuery UI.
Referencing the base theme for the version I'm now using resolved this issue.
For upgrading a custom theme to the current version, see
How to upgrade a custom jQuery UI theme?
I think it would be preferable to do this in the CSS based on the selector, so something like:
#dialog {
z-index: 100000000;
}
Or, in the js:
$('#dialog').css('z-index','1000000');
Or do you need to set a dynamic z-index value?
Related
i am trying to override the opacity of ui-disabled in my app to have a not focusable textfield with white text that i can change per js (<disabled="true">).
i don't know if it will work on all browsers with the opacity set to 1
or how to use the suggestion on this page exactly (on mobileinit or as a css-file and how about the semantics):
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
You can override jQuery Mobile's CSS with your own. Include a stylesheet after jqm's in your html, or use a style=... attribute on your html tag — either will override the default. Hence the Cascading in Cascading Style Sheets.
I highly recommend using the developer tools built into most browsers. In Chrome, for example, right-click anything in a web page and select Inspect Element. It will show you the computed CSS for the element, including which styles came from which CSS file, which were overridden by other stylesheets, etc. You can even edit the styles in the tool and see what changes would look like.
Here you can see the stylesheet f.css overrides several properties from the jqm stylesheet, which sets them in several places and overrides itself with various classes:
I tried adding a jquery-ui datepicker to my website. I downloaded the necessary jquery-ui js components and Smoothness theme css. The problem is that when I add the widget to my site, it looks like this:
Broken datepicker
as opposed to this:
What it should look like
I'm using customized twitter bootstrap as the main style for my site, but it doesn't seem to affect the styling of the widget according to Chrome Inspect element.
Any ideas what could be wrong, or how could I investigate this further?
you need to change the size of your font :
.ui-widget {
font-size: 11px;
}
I'm using jquery UI to resize a div vertically(I.E. using the n handle). I'm using a helper so it only resizes after the user stops dragging. After a resize is done I call a function which sets dimensions on surrounding elements so they all fit within a container.
This works in both chrome and IE, but in firefox a css property of top is added which blows the div out of the container.
I've tried removing the top value after the fact, which works, but this is kind of a hack and also causes the div to 'jump'.
Is this a bug? Is there a workaround using jquery css html, etc?
To see what I mean check this fiddle and resize the element, if you inspect it in firefox there will a top css property but not in chrome.
Thanks,
Luke
In my opinion it is a bug.
Workaround: if you add a top: 0; to the css rule for #resizable IE, chrome and firefox have the same behavior. Also see the updated example.
=== UPDATE ===
It's a firefox bug. I walked from the jQuery UI resizable method code until the css method of jQuery (main) code to find an answer. At the end of my search I could found that firefox returns for css top value auto for not/static positioned elements, but returns 0px if relative position is set; in both cases top is not defined (they could be set to auto with no difference - it's the default value).
Also see this example.
In the resizable method this result makes the difference (jQuery UI sets the relative position to the DOM element by adding a class). If the bug (which I have reported to mozilla) will be fixed, the behavior of your example in the firefox should be the same as in chrome.
I'll report here if there is something new...
=== UPDATE ===
Now I have a workaround for you:
for the special situation you described set the css position of your resizable element manually to static.
Add to your stylesheets:
#resizable { position: static; }
Also see your updated example.
I'm trying to apply jQuery UI Selectable to a portion of my website. However, I do not see either the selection box while dragging the mouse, nor does the color of selected li elements change.
So to understand the problem, I went back to the source:
http://jqueryui.com/demos/selectable/
I see (using IE9 developer tools) that a style .ui-selected is applied to selected elements. Using Trace Styles, IE shows that background-color is originally defined in jquery-ui.css but overridden (ultimately) by #selectable .ui-selected. However, IE does not show the source of #selectable .ui-selected. Searching the jQuery UI style sheet I reference, jquery-ui-1.8.18.custom.css, finds no mention of ui-selected, nor do I find it in jquery.ui.selectable.css.
Where exactly is the demo page getting the CSS for the background color?
I found one of the other jQueryUI demos defines the style for those classes in a custom style sheet, so I ended up following that lead.
http://jqueryui.com/demos/selectable/#serialize
It seems odd that those styles are not part of jQueryUI Themeroller. Perhaps that will change in the future.
I have a jQuery dialog box on my website. I give a div on the page the "dialog" id it's contents become the contents of the dialog box. However, when the page is loading, this div appears at the top of the page and looks bad. Does anyone know how to deal with this?
Just hide your div via your CSS file:
#dialog {display: none}
This will not affect its actual display when the dialog is opened.
I tested to be sure, and this method worked with jQuery UI 1.7.2
Assuming that the dialog is changing the 'display' style [eg using .show() and .hide()] then all jQueryUI is doing is setting the display style. thus, you can set the div with the display:none by default, and that way it won't show when you load.