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;
}
Related
In my css file, i've overriden a bootstrap uib-tooltip class . This applies to all tooltips of my page but i want that one of them uses the bootstrap default css , how to do that? The :not selector didn't work
According to your pen, You need to use
div:not(.kmg)>.text-primary{
color:red !important;
}
See the codepen here
https://codepen.io/anon/pen/zQbJKb
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?
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'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've already read the answers to the problems similar to mine:
in the hand-made popup with position:fixed; jquery datepicker doesn't show up.
My problem is however not solved with overriding z-index of the datepicker:
my popup is 600, and setting the .ui-datepicker to 1000 !important makes no difference. I tried to set it everywhere I could (in css of jqueryUI, in mine, in javascript, but without any change).
Eventually it looks like this after calling $("#date").datepicker();
http://clip2net.com/clip/m56531/1297199993-cliptj4770-4kb.png
So, the container is added, but not the contents, and z-index of the date picker is bigger indeed than the one of the popup.
Is my problem different from z-index?
P.S. All works fine with datepicker inside the block which has position:static. But also a problem with absolute;
Fastest solution is to take another datepicker: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
Not that fancy, not that cool, but at least works.