Look of jQuery-ui checkboxes are fine but for an application I need to customize the appearance of a series (not all) of checkboxes on a form so they appears without the border and the background.
Any hint or working snippet of code is apreciated. Thank you very much.
Related
Mobile Safari uses a UIPickerView for <select> elements - I'd like to change the background color of it with CSS. As you can see in the screen shot below, it's very hard to read. What you are looking at is the State <select> form element. Changing the text color or background color of the <select> element itself doesn't fix the problem.
I thought it was related to a parent element's or its own background color - but I went up the line and changed every ancestor element's background color to white and the problem persisted. Is there a prefixed style or trick to making this GUI legible? Or maybe it's just a bug.
EDIT: The gray behind the UIPickerView is filled in by mobile Safari, since the select is almost at the bottom of the page. Mobile Safari vertically centers the select above the UIPickerView and fills in the extra space below the page with the gray. The question is, how does it determine to use that dark gray? I've tried changing the body text color, and background-color of every other element on the page to no avail.
Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.
I'm sure I'm not the only person asking this question. When you have a jQuery UI implementation, and you use the .buttonset(); command to turn a set of checkboxes into a button-set (multi selectable), I'm having trouble when a user de-selects an item after selecting it.
So let's say on hover, it turns into a certain colour (based on the settings of the jQueryUI theme I downloaded), and after clicking, it turns into the active state colour. When I click the same item again, and move the mouse away, it remains the hover colour, causing confusion as to whether the item is deselected or not.
And this only happens on Firefox only - seems to work fine on Chrome & Safari.
Here's a demo link: http://www.tylervolker.com/mls-search
I tried to force a blur() event to these items but no dice it seems.
$('.label').click(function(){
$(this).blur();
});
What am I missing? Or is this just a Firefox thing I need to live with until either jQueryUI updates their code, or Firefox appends this?
This appears to be this known jQuery UI bug - http://bugs.jqueryui.com/ticket/5518. The button widget isn't set to be addressed by the jQuery UI dev team until 1.11 so I wouldn't expect a fix for this anytime soon.
There are some suggested workarounds in the related issues on that ticket.
I have a problem that drives me nuts, i have used themeroller from jquery mobile and i love this tool, it has its flaws and one of them is when you use dark backgrounds it leaves a little white stripe at the top of the list you can see it right here
http://yellowgreenmedia.info/1-theme/
it is on the top , left and right of the list, its small but it is there
Is there a fix for this, so i can remove the annoying white stripe
Thanks
Dave
On this:
div class="ui-btn-inner ui-li" ...
Give it:
border-top:0
Worked at my end.
First I would add a HTML DOCTYPE
http://www.w3schools.com/html5/tag_doctype.asp
I think you're missing the opening <html> tag
http://yellowgreenmedia.info/1-theme/ (right click to view source)
and last I think you also need to add just the custom theme and not jQM default css
http://jsfiddle.net/UEuKA/3/
Last I would give the jQM Theme Roller another go as it looks to be adding CSS from RC2
http://jquerymobile.com/themeroller/
http://yellowgreenmedia.info/1-theme/css/style.css (jQuery Mobile v1.0rc2)
One more thing, your custom CSS could be causing the extra line as well, Didn't look at it too much though
http://yellowgreenmedia.info/1-theme/css/custom.css
I am using Trent Richardson's timepicker and I am having an issue with the jquery-ui sliders that are used in his widget. The draggable boxes in the sliders are not rendering fully. I am left with what looks like the border of what would have been the boxes on the far left side of the slider and it does not move when I click on it.
I have tried using this tool with the full version of jquery and jquery-ui packages so I know that I am not missing a package and I have not found anyone else with a similar problem. Everything else works just fine in the timepicker so I believe that this is a problem specific to the slider. My javascript is identical to the first example shown in the link above.
Has anyone experience a similar problem when working with sliders?
UPDATE
Found the issue. It turns out I did not have sliders selected when I downloaded the css files for my datepicker. I had since then downloaded the necessary slider functions but forgot to redownload the css...
DOH!
Yes that's it, the solutin is to add the slider css to your project. The file can be found here :
http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.slider.css
How to change a background color of jQueryUI Progressbar?
Im trying to use:
$('#progressbar div').css({backgroundColor: '#9CFF29'});
but no success :(
Anybody can help me?
Thanks!
The selector should be on the main <div> so just use #progressbar and to override the styling, use just background (since it also has an image defined as well), like this:
$('#progressbar').css({background: '#9CFF29'});
You can test it out here.
jQuery UI Progressbar plugin uses the
jQuery UI CSS Framework to style its
look and feel, including colors and
background textures. We recommend
using the ThemeRoller tool to create
and download custom themes that are
easy to build and maintain.
http://jqueryui.com/themeroller/
Make sure you are selecting the div. Are you able to change other properties of #progressbar such as width?