Just curious if there is a way to change the positioning of the element from relative to the dropdown to say a centered on the window? I am having trouble with it going off the screen on mobile devices and was hoping to mod it or find an option to position it relative to the window.

Hi, this plug in is not supported if i want to implement optgroup.

adding classes to the items in your select list make it pretty - with this plugin it did not inherit any classess

its one line to inherit classes, and makes the plugin pretty darn good

added this code

            if ($(this).attr("class")) { li.addClass($(this).attr("class")); } 

full code area like this

        this.find("option").each(function() { 
            var li = $("<li>" + $(this).text() + "</li>")
                .data("value", $(this).attr("value"))
                .data("name", $(this).text())
                .appendTo(ul);
            if ($(this).attr("selected")) { li.addClass("selected"); } 
            if ($(this).attr("class")) { li.addClass($(this).attr("class")); } 
        });

works perfect - makes the plugin very nice.

Trying to implement this in a form, css and js is connected but the list is displayed as normal. What could be wrong?

Hi there!

I tried fixing the width and height of the gentleselect-label span element, but it is ignoring each kind of CSS.

I even set it as a embed style into the created element inside the .js file, looked for anything that may be overwriting the css styles, but didn't find a thing.

Is there a way to style it a little bit better?

Hi

I am trying to use it on a dynamically generated dropdown box in wordpress plugin which allows for custom css and js, but it does not renders the select element with an id but just a name, so can I attach it with a name instead of an id?

Please confirm

Thanks
Amit.

In firefox the order of a multi-column selector is perfect.
But the same page in chrome has a blank spot in the 2nd position in the first column. From that point forward the float left items don't float into that spot creating an out of order list.

Here it is in FIREFOX (perfect alignment)

Here it is in CHROME (misaligned)

This is my first time posting an issue. I apologize if I have broken any rules.

Thanks for your great work!

.gentleselect-label needs to have

white-space:nowrap;

then it wont wrap and look really bad when the layout shrinks its available area

I want to make the maximum amount of selections 7. Is this possible with gentleSelect?

Hi again, still loving the script.

I just started to build out a mobile theme using the gentleselect but there is no mouseleave on touch devices so the selects stay open when you click a new one, or off the the select.

I fixed part of this with a simple hack:
labelClick : function() {
$(".gentleselect-dialog").fadeOut();

I have yet to figure a good way to hide the old dialogs when they are clicked off (as in the body is clicked), but its still early.

I am using this library as a Tag Selector/Picker for my Bookmarking app.

Sometimes I have hundreds of tags list items shown in the popup selector which is too much to show and find what I need in the pop up so I wanted to add a list of alphabetical letters across the top to act as tabs to sort and filter the tag items shown and make it easy to find what I am looking for.

jQuery Plugin for Alphabetical list filter:

I found this jQuery library which does exactly what I need to a list of items and was able to add it to this library to make it work as my demo image below shows:
Project Demo - http://ericsteinborn.com/jquery-listnav/
GiutHub - https://github.com/esteinborn/jquery-listnav

Demo of my integration of alphabetical list filter and use as a tag selector:

Here is a live JSFiddle Demo in which I have combined the 2 libraries but I still need to make it into 1 library. https://jsfiddle.net/jasondavis/zgzh5b67/

My Feature Request:

Right now to make this work I have to include the jQuery library for jQuery ListNav and then init and call it from jQuery-gentle-select

It would be nice if someone could add this same functionality into the jQuery-gentle-select library so that I dont have to use a 2nd library. I am not able to do it myself but here is the JavaScript file for jQuery ListNav - https://github.com/esteinborn/jquery-listnav/blob/master/jquery-listnav.js It is about 350 lines of code.

Can this be added as a feature? I would appreciate anyone's help in this very much thanks in advance.

I want the menu will open to the left side instead to the right.
Is this possible?

The GentleSelect doesn't appear to be updating the actual with the selected value and nothing gets 'posted' to my form handler code. I've tested this in Chrome, Firefox and IE... Any ideas why this isn't working?

The demo page doesn't format any of the dropdowns in FireFox, Chrome or IE11. Is there a compatibility issue?

Is there a way to render MultiSelect elements with checkboxes?

I'd like to start using the gentleSelect plugin in order to render a few MultiSelect elements with large datasets (i.e. a list of sizes) in a more manageable format for users. I've been using the jQuery UI MultiSelect widget (which has checkboxes, but not the ability to render options in multiple columns), and I think it's important that I continue using checkboxes in order to create both a consistent and an intuitive user experience.

I'd prefer a solution that allows me to continue using Select elements (I've seen a few possible workarounds using css but they require switching to list items)