Seems that selects does not respect width set in CSS, such as width:300px, or width:100%

Would be nice if the width was pulled from the width of the select element it is to replace instead of being set in the CSS for uniform itself.

Wouldn't that be sweet.

Hi,

Is there a way I can handle two sets of radio buttons in the form, as of now, the uniform plugin acts on all the radio buttons of the form, irrespective of whether they share the same name or not.

Thanks,
Nagaraj

I tried setting the useID parameter in the options to false, but it didn't seem to make a difference. Tried dynamically setting IDs of elements before adding them to the primary DOM tree, but it didn't seem to make a difference. Effectively does nothing in this case.

Chrome Mac is still in beta but after using a select pull down the left hand end of the select drops down around 3px resulting in a "tear" in the image.

Uniform needs to support multiple selects in order for it to be fully useful. Do you have any plans to implement this in the near future?

It's mainly a type="text" field, but on some browsers (it's HTML5) it gives you additional funcionality (like a stylized search box in Safari, a cache of search terms, etc). Having to use external scripts to stylize it these days...

See title.

Aristo has in it's design a topbar menu bar. Is there a plan to add it to uniform?

The class .active is added to the .selector on mousedown but not removed on mouseup in Chrome (OS X) what causes the .selector to stay in the .active state "forever"

The button mousedown and mouseup events don't get called (in Safari or FF anyway) so active state does not work in FF. Active state for buttons works in Safari because it supports :active.

Is it possible to add input type text and textarea to unify?

Regards

If you add the size attribute on a select element so that it's no longer a drop down, uniform still formats it as a drop down and it breaks. Any way to make it ignore the select element when size is defined?

I realize that I could just assign uniform to work with specific drop downs, but it's a Wordpress site with many drop downs being dynamically created.

Seems like uploader should be a class here.
http://github.com/pixelmatrix/uniform/blob/master/css/uniform.default.css#L373

Just noticed on webkit browsers (Chrome, Safari on OS X):

When a select is activated it causes a background-offset of .selector span according to the value given in uniform.default.css line 58 and 61. That means that "top: 3px" causes the background of .selector span to move 3px upwards so that the whole select looks destroyed.

You can avoid that by removing either the top/bottom values in lines 58, 61 or better by removing the height of the select on line 398 of uniform.default.css

Hello,

I'm trying to use uniform and jQuery Ui togheter, but isn't working. In the header I call jquery, jquery ui and the js file where I set up the dialog and datepicker from jquery ui. After them I call uniform, everything is on the right place. But doing this way, uniform doesn't work, and if I invert jquery ui and uniform, the dialog and datepicker stop working. Any one know why this is happening?

Also, I call uniform in other pages, but just the first element of the form get stylized, know why?

regards,

RA

Hi,
So I worked out the CSS and added about it in your wiki. Perhaps it will make it somewhat clearer.
The problem is that I don't get it to work in IE - in my case IE8. It is fine in Firefox and Chrome.

This is my head script:
[code]<script type='text/javascript'>
jQuery(document).ready(function($){
$("select, input:checkbox, input:radio, input:file").uniform();
});
</script>[/code]

It does not really want to work with $ instead of jQuery in it, it does not really work with the syntax sugested in wiki: $(“select, input[type=checkbox], input[type=radio], input[type=file]”).uniform();.
It works the way I show it above in my [code][/code], not in IE though. Any ideas? DO I mix sth? Is the syntax in .js files different than in HTML [code]<script>[/code] tags?

The example on the site for replacing all elements doesn't work in IE. More specific selects get it working again. Please update docs...

$("select, input:checkbox, input:radio, input:file").uniform();

Hey Josh, if you goto your example page http://pixelmatrixdesign.com/uniform/ and within the console enter: $.uniform.update("input[value='check1']"); and nothing happens. I'm expecting check box 1 to be checked/unchecked.

Is that correct? I'm trying to dynamically check a checkbox and $.uniform.update doesn't seem to be working.

Thanks man!

The Aristo theme should be attributed to 280 North, and it should be linked to the github page (http://github.com/280north/aristo).

Seems like the better option for unifying form design but its not as flexible as it might be.

Seems its difficult to size form items such as the select unless the size is uniform across a site. I would like to specify the width of different selects placed for different use throughout the site but to do this would require a few lines of css for each select which is a bit cumbersome. Would be ideal if the script could grab the width attribute, possibly other attributes given to the original select or indeed to the selector class and apply the necessary changes to "div.selector select" and "div.selector span" for example.

Nice job though, keeping the original functionality of the dropdown of a select is ideal.

I see that every wrapper created has a uniform- id. This breaks the semantic because you are creating various elements with the same id. i see that there's a option to change for other id, but this way will still have duplicates id's, that should be unique in a page.

The plugin it's great!

I have my uniform select boxes on top of jquery gradient plugin http://plugins.jquery.com/project/gradient

When i apply a gradient to the div the select boxes sit in, they refuse to open. I've tried a number of other gradient plugin but the same issue occurs.

This happens in both IE and FF

You should add a README with some information about the project like Installation, etc. I know that it is present on the project page but won't hurt to have it here in the repository as well.

Does anyone else have a problem with IE, rendering the following output : http://dev.kurisotofa.be/index.html (or http://dev.kurisotofa.be/uniform-ie.bmp for a screenshot) ?

According to a webmaster dev tool I use, IE doesn't apply the right CSS-class, it takes just a random class with the same last selector (e.g. IE applies div.radio.active to div.checkbox.active)...

Hello, I'm attempting to implement Uniform on a large website. I've made a few custom alterations that should work, but I'm not having any luck. I'll do my best to explain everything I've done....

1. CSS
   I've copy/pasted the uniform css data into our single CSS file (I'd rather just have 1 css file).
2. SPRITE
   I've placed the sprite image in our main graphics directly (and updated the div.uploader span.action { background-image: url() } to reflect the correct URL
3. JS
   I am, via PHP, 'including' the uniform.js file BEFORE making the $("select").uniform(); call.

The result, when I load the page, is that the dropdown is un-styled (see-thru background). The dropdown is clickable (ie, when i click on it, i see the options), but I'm not seeing the background image(s).

I'll be more than happy to discuss via email and provide URLs for viewing...

Thanks!

Here is how I change the rules:

div.checker {
position: relative;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: middle;
}

Please consider it in the next version, thank you.

Is it me, or are the sexy form controls not accessible via the keyboard? :(

Any Idea how to style the width of a select? http://broneg.pl is the address. The problem is clearly visible - IT is to wide. I do not really get the structure of this css cause it is not really applying to my existing classes. How does it work? Can I move the select with normal padding in my main css. THX!

When adding select boxes dynamically $.uniform.update() does not set them up properly. It looks as if a change function needs to be added to when the user changes what is selected it gets registered.

The fix is below: (just the conditional related to selects)

           if($e.is("select")){
                //element is a select
                var spanTag = $e.siblings("span");
                var divTag = $e.parent("div");

                divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
                var etext = $e.find(":selected").text();
                //reset current selected text
                spanTag.html($e.find(":selected").text());

                if($e.is(":disabled")){
                    divTag.addClass(options.disabledClass);
                }else{
                    divTag.removeClass(options.disabledClass);
                }
                // this is the fix which will allow dynamically added select boxes to work properly
                $e.change(function() {
                    spanTag.text($e.find(":selected").text());
                    divTag.removeClass(options.activeClass);
                });

            }else if($e.is(":checkbox")){

I think it would be a useful addition to disallow text selection inside labels.

When rapidly clicking a label several times (to select/deselect its radio button), the label text gets selected.

Feel free to use my noSelect jQuery plugin for this.

I would be willing to create a patch for this if you’re interested.

Got a suggestion to add an error state for when there are errors in the form.

Hey, love this plugin, but it doesn't appear to play well with line-height. Using the Blueprint CSS framework, for example, which relies on line-height to align inline forms vertically. Basically what happens is that the Uniform element is rendered as though line-height is 1, but the clickable area is where it's supposed to be (line-height:3, in Blueprint's case). If you need a demo of the problem let me know and I'll post one.

I'm noticing in some versions of IE7 that the opacity doesn't seem to be working on the form elements. The original radio, file upload and select boxes will continue to show up over the styled form inputs.

I think it has to do with style="opacity:0" not being compatible with IE7. Not even the demo on the homepage works.

I noticed that the Aristo theme incorrectly wraps long options in elements (http://drp.ly/17ID4P), whereas the default theme does more elegant overflow handling. I simply borrowed the CSS from the default theme and added it to Aristo: div.selector { position: relative; padding-left: 10px; overflow: hidden; } div.selector span { display: block; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } Is the Aristo uniform theme on GitHub anywhere? It would be very useful if so :)

When i click on the uniform select and hold the mousebutton down, the select options appear.
Then i move to the option i want to select with my mousebutton still pressed. When i let go the mousebutton, the options stay open and the option i wanted to select doesn´t get selected.
Tested in IE 7.

I want change default style for submit buttons,
but next code was not worked for me

$(document).ready(function() {
$("select, input:checkbox, input:radio, input:file, button, input:submit").uniform();
});

What do you think about it ??

I came across your webpage and I liked how simple uniform is, but when I tested on opera it does not work. I will use this plugin when it supports all major browsers.

Good luck :)

In doFile():
.change(function(){
var filename = $el.val();
filename = filename.split("/");
filename = filename[(filename.length-1)];
filenameTag.text($el.val());
})
should probably read:
.change(function(){
var filename = $(this).val();
filename = filename.split(/[/]/);
filename = filename[(filename.length-1)];
filenameTag.text(filename);
})
In order to split filenames on both forward and backward slashes. Also, I have fixed the fact that filename is calculated and then ignored. I have also incorporated the fix from larsboldt in Issue #13 when getting the filename.

Select boxes with optgroups cause strange behaviour in Safari and Firefox.
Selected option is either hidden or multiple options appear over the select sprite.

Any plans to support optgroups?

in function doFile - change
Original:
.change(function(){
var filename = $el.val();
filename = filename.split("/");
filename = filename[(filename.length-1)];
filenameTag.text($el.val());
})

Fix:
.change(function(){
var filename = $(this).val();
filename = filename.split("/");
filename = filename[(filename.length-1)];
filenameTag.text($(this).val());
})

With the original code, all file inputs would take the last file inputs value instead of its own and fail.

Cheers
Lars

Are there any plans to permit custom styling of the dropdown menus associated with Select form elements? Something akin to this: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Hi, in the file uploader, the file name displayed after a file is selected is the whole file path, not simply the name. Starting at line 316 (version 1.5), I'd suggest:

var filename = $el.val();
filename = filename.split("/");
filename = filename[(filename.length - 1)];
filename = filename.split("");
filename = filename[(filename.length - 1)];
filenameTag.text(filename);

(Please pardon if there is already a ticket for this.)

Cheers,

• Matt

it seems that it doesn't support text input boxes (nor buttons)

Yah i'm gonna be that a-hole. :)

This is a super solid plugin but so many developers can't put it to use without ie6.

If you want to close this as a WONTFIX, i'd love to see your ie6 guide.. as in.. "No modifications will be made at all in ie6." so at least we know it wont totally blow up. :)

Most 'select' elements look fine in IE7. However, if the options for the 'select' contain text which is too long - the right side of the 'select' disappears. Test by using a small 'select' with long-text options.

Truncation of too long texts (cropping them and adding "...") in selects doesn't work with FF 3.6 on OS X 10.5.8 (because text-overflow: ellipsis is not working in FF)

When I run uniform() on a select form element that doesn't have one of its options selected, then the uniform shows a blank value for the display. I think it should probably show what the dropdown would have showed (defaulting to selecting the text of the first item). What do you think?

There's a missing semi-colon on line 301 of uniform.default.css.

One of my users mentioned that the checkboxes are a bit hard to see on my site -- a bit washed out. Maybe they should be darkened just a bit, for greater contrast?

I did so on the sprite using Levels in Photoshop -- it's a good way to darken across all shades in an even way. Looks better, imho.