Using a "dark" theme such as UI Darkness, Le Frog or Dark Hive with jQueryUI 1.12.1, the new CheckboxRadio widget has an invisible white-on-white tick. You can see this on Themeroller. The problem occurs because the tick follows the "Clickable: default state > icon" colour while the tickbox background is "Clickable: active state > text", and dark backgrounds usually set both these things to a light colour.
The tick would be visible if it was in the "Clickable: active state > icon" colour which, IMHO, is what the designers intended. However, the CSS rule precedence isn't quite right - it is for active buttons, but not for active non-buttons that are using "ui-button" styling.
A demo of the fault and my proposed fix is available on JSfiddle. Essentially they need to add this:
.ui-button.ui-state-active .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png");
}
though my demo has the absolute path.
I hope this post saves you some head-scratching as to why your CheckboxRadio isn't working the way you were expecting.
I've reported the problem on the jQueryUI bug tracker (#15155), though at the time of writing they haven't picked it up. Is this the right place for "theme" issues?
Related
On my iphone phonegap app, whenever I've got text on a background color, the text seems to get a ghosting effect, the same text is repeated 2 or 3 pixels below, almost like a drop shadow but exactly below and in the same color as the text.
Any ideas how to get rid of this? I'm guessing its applying some kind of -webkit specific styling but I can't seem to find what it is.
Below is an image of what is happening, the text to the left, 'Web Deal' is the problem, whereas the text on the right is fine.
Ok, I managed to fix this, it was picking up a text-shadow property from jquery mobile css. It was applying it to all text but because its white it was only visible on text with a background colour. Thanks for your help
Please post your css.
If you are able to open the app on Chrome browser on a desktop, try inspect element and you can find which styles are applied to the text.
As you didn't provide any CSS I'll just assume that your text ist rendered bold.
Rendering bold type in mobile Safari or the WebView is buggy and causes the weird effect.
Try using a text-shadow instead.
.bold {
//font-weight: bold;
text-shadow: 0 0 0 2px white;
}
I have been using JQueryUI for various aspects of my site, and a small tabbed menu set was working well, except in firefox. The image below shows the same code rendered in firefox on top, and IE9 below. Note the gap under the tabs and the (possible?) increase in padding inside the tab. I have removed all my stylesheets from the site (the 2nd image) leaving just the base JQuery UI one, but the gaps still appear, and only in firefox.
The js call is as basic as it can be:
$("#menuTabs").tabs();
It's not often I have display issues where IE is better than firefox... Having removed all the CSS I generated, and made sure there's no styles being applied, I'm at a loss as to where to look next!
If you can offer any suggestions as to what might be causing it, I'd be a happy chappie!
[EDIT]
After scaling back the code as far as I could, and using only 'known good' libraries, it turns out that it is caused by it being in a table cell!
Here's some code you can have a play with! http://jsfiddle.net/XVHTk/
It does however work when "Normalized CSS" is checked, so it could be padding inherited from the cell maybe?
[EDIT #2]
Right.
So.
It turns out that CSS styles applied to a table to remove padding and margins and borders and so forth are not enough. You have to include cellpadding="0" and cellspacing="0" in the table definition otherwise the jQuery tabs have some extra padding around them.
Odd.
jsFiddle with table and no extras: http://jsfiddle.net/XVHTk/1/
jsFiddle with table spacing/padding stripped: http://jsfiddle.net/XVHTk/2/
Why the HTML cell properties are being transferred into the tabs, I have no idea. I'm just happy to have fixed it!
This is caused by a bug in the ui-helper-clearfix class. See ticket #8442 and the associated fix. As you can see from the ticket, this was fixed in 1.10.1. I've created a fiddle showing this working properly with 1.10.1 and using 1.8.x with additional CSS to fix the issue. The latter shows that if you can't upgrade to 1.10.1+ right now, you can just include the following CSS:
.ui-helper-clearfix:after {
border-collapse: collapse;
}
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'm using a jQuery UI Theme, which is predominantly white text on a black background. I'm using a <fieldset> with a <legend> and the text of the latter is being display in black on a black background (black being the browser's default font colour).
I've tried applying various jQuery UI Theme CSS classes to the legend (e.g. "ui-widget-content"), but I get too much extra baggage, such as borders and backgrounds, when I just want the text to be white.
Before anyone says "why don't you just make the text white?", I should state that I have switchable themes, so it has to get the colour from the theme's stylesheet.
I know that I can use jQuery to apply the CSS class to all legends, when I know which one I want, thus:
$("legend").addClass("???");
Any help would be greatly appreciated.
I solved the problem by using jQuery to set the <legend> colour to be the same as that of an element with a CSS class of ui-widget-content.
$("legend").css("color", $(".ui-widget-content").css("color"));
Obviously, this depends on there actually being an element with that class present. For my purposes, I know there always will be.
I'm learning about the Framework Icons in jQuery UI.
<span class="ui-icon ui-icon-circle-minus"></span>
produces an icon of a minus sign inside a circle.
Using the ThemeRoller Firefox Bookmarklet, I was able to change the color of the icon to red (to make it look like a delete button).
Q: How can I make one jQueryUI icon be red and another one another color?
<span class="ui-icon ui-icon-circle-plus"></span>
I'd like to make this one green.
Use the ui-state-... classes to change the state of the element with the icon. You'll need to design your theme so that items in different states (highlight,hover,active,error,default) have different colors.
<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>
I would recommend against using the states this way (just to change colors, that is). I'd use the states semantically and let the icons render as needed to be consistent with the state. If I specifically needed red/green icons, I'd generate those icons specifically as images and simply use them directly instead of trying to design the theme to get different color choices just for those icons.
For what it's worth, I think the FamFamFam Silk icons integrate pretty well with jQuery UI.
You can't do this, at least not in the context of ThemeRoller. Themeroller uses one sprite image for this...a large image that contains all the Icons.
You can make another theme, same it's spritemap image to your images folder, and go into your jQuery UI CSS and change the .ui-icon-circle-plus background-image property.
It should look like this:
.ui-icon-circle-plus { background-position: 0 -192px; }
It would need to look something like this:
.ui-icon-circle-plus {
background-image: url(RedIcons.png);
background-position: 0 -192px;
}
You can look at the .ui-icon styles for the image it's currently using.