patrickkunka / easydropdown Goto Github PK

I am using the easydropdown with .net dropdown. I need to have the postbakc to true but when it postbakcs, the styling is lost. can you tell me how to fix that

When I use easydropdown inside a fixed heigh object (li or td) or at the bottom of section, the dropdown is hidden, rather than appearing above the content beneath as a native select box would behave. I've tried a few things with absolute positioning and setting z-index via CSS to no avail. Any ideas on how to tweak the CSS of the select box or containing object to prevent this? Attached is the select box inside a table cell.

http://jsfiddle.net/PR8v8/1/

EDIT
This happens if there isn't any label.

Here's the layout for my code:

I am dynamically adding values to a drop box. Once all the values are added I want to style it using easydropdown. From there when I want the ability to set what is selected. What is the correct order for this?

This is what I have right now. These lines are called after the dropbox is appended and the correct options are added. The last line is ignored however. Why is this?

$('#homeSelectSite').easyDropDown();
$('#homeSelectSite').easyDropDown('select', selectedSite);

I have set up a select element(where I have attached the dropdown class) and where the user can select a timeslot(here is the HTML http://sdrv.ms/1buxc9v).

I have also made a small js code where the time that the user selects on a calendar(jquery plugin FullCalendar http://arshaw.com/fullcalendar/),that time is selected in the dropdown menu where the dropdown class is attached.Here is the js:
$('#calendar').on('mouseup', '.fc-event-inner', function () {

  var timeslot=$('.fc-event-time').html().slice(0,4).replace(":",""); //with this code I "grab" the time from the calendar, remove :, and go to set the corresponding option from the menu. 
  $('#times').easyDropDown('select',timeslot); 

});

times is also the id name of the dropdown....
The problem is that when the above code is about to run I get the following error:
Uncaught TypeError: Cannot read property 'title' of undefined...which refers to line 319 of easy.dropdown.js...and the most strange thing is that it happens from a specific timeslot selection and afterwards.From 10:00AM for example...before that, there is no problem.I cannot find why this is hapenning.

Hey,
it's interesting thing because your script doesn't work on my computer in Firefox 26 & 27 but everything is fine on 2 other machines I've tested.

Works under: Windows XP, Windows 7
Crashes under: Windows Vista

I don't have any script errors in the console. I use metro style.

Example on your website doesn't open options at all, in my case script opens standard, browser styled list of options.

The ability to trigger an 'update' event when the list of options has been updated would be a great addition. Similar to http://harvesthq.github.io/chosen/#change-update-events.

Destroying and rebuilding the dropdowns each time with the same options seems to be very inefficient

Hi ,
The following the select drop down

value ----display value
"16"--13
"17"--18
"15"--7
"13"--APTA
"14"--ext
"18"---test
Rating Value13187APTAEspecialmente Recomendada para la InfanciaPelícula X

Query: $("#ratingvalue").easyDropDown('select','17');
The out put generated is : 13(it is selected this option)

This is a bug actually it should select the 18

Could you please suggest on this.

I have created a for loop to create all the options in the select element.The problem is that this seems not to work with the .dropdown class. See the image snapshot to see what is the effect-you will notice that an arrow is shown and not the menu itself.
Do not be confused by the labels as they are in greek.

Enough said.

Hello. I customized css file based on easydropdown.flat.css and checked in Android browser.
when I tap the button, the dropdown was not displayed, but after I changed css file to easydropdown.css, it was done.
I checked CSS files, in "easydropdown.css" has ".dropdown.touch .old" in line 89.
It is required to easydropdown.flat.css too.

Thanks.

When used inside a Modal window. The height of the dropdowns doesn't get properly calculated on hidden modals. Can you add a refresh method to ge triggered once I open up the modal.

Thanks

Not sure why, but that was my experience.

The dropdown plugin works. However when you try and select it nothing happens.

This method is not working when passing in a string value:

Does not select the option C.

I've checked this in Windows 8 and Windows 8.1 Update in the Chrome browser.

I can't seem to get the select menu to be styled in Chrome. I tested in IE11 and the menu looks great.

I checked your demo page the menus work fine there. However, i did notice that your demo page does not specify any doctype.

Or simply rename it to something what´s not used so often, like ".easydropdown".
You already set the configurable class this.wrapperClass = 'easydropdown', but it seems that the variable is not used in the code (manually use of ".dropdown")?

Thank you :)

Hi,

So far I’ve personally tested this on 2.3.3 on a Galaxy S2, though a testing company (working on a site with us) has flagged it as an issue on Galaxy S3, as well as Nexus 10. I’ve also recreated it in Android 4.2.2 on a Nexus 7 (emulated).

The default theme CSS includes position: absolute on the .old container: https://github.com/patrickkunka/easydropdown/blob/master/themes/easydropdown.css#L75 (all three themes include this). This prevents the ‘native’ select menu from showing when .focus() is triggered, if the dropdown is inside an element with overflow: hidden or overflow-x: hidden. Simply removing the position: absolute fixes the issue - though there may be implications for other browsers.

I appreciate this isn’t necessarily an issue with EasyDropDown, but I’m certain that others will encounter this issue in future - worth noting this as an issue for anyone searching :).

More info: jquery-archive/jquery-mobile#2066 (comment)

When focusing on the dropdown and pressing enter the native select dropdown options appear.

If you apply easyDropDown to an HTML-Element with the following structure:

<select id="foo"></select>

nothing happens.

This is not a bug, but I'm wondering if there's a way to load the stylized menus before any other JS fires on the page. We're currently loading a few libraries after easyDropDown, but the styling doesn't kick in until everything is loaded. While the page loads, the user sees a select element in our header, and the styling doesn't take affect for another 2 seconds or so. I've tried moving it to header and everything else to footer. We're working on optimizing and minifying, but can't seem to get this to work. Thanks for any help you can offer.

When trying to select a year for example (in the provided demo), you can type 1999 and it will select 1999, but it doesn't scroll down to the selected value so you cannot see it.

I am trying to use with bootstrap 3, but bootstrap 3 had already use a class '.dropdown'. So is there any chance that the namespace may be changed.

easydropdown is not workin in firefox 26, is there any fix for it.

I just found out, that i can't click the carat icon on android (it doesn't open the dropdown). It is just the icon itself, the area around the icon is still clickable.
Work perfectly on iOS and Chrome tough.

Here is how i fixed the problem:

i changed line 84 from:

self.$carat = $('<span class="carat"/>').appendTo(self.$container);

to:

self.$carat = $('<span class="carat"/>').prependTo(self.$container);

and now it also works on Android.

Not able to extend options with

 $('select.custom-select').easyDropDown({
                    cutOff: 10,
                    onSelect: function(selected){
                        console.log('SELECTED');
                        /*jshint -W087 */ 
                        debugger;
                    }
                });

In jquery.easydropdown.js around line 322 there is this command:

index = self.$select.find('option[value='+index+']').index() - 1;

The .index() function, however, returns a zero-based index, so results returned by that function are off by one.

You should be able to replicate this bug by creating some structure like this:

<select class="dropdown" id="my-foo-select">
<option value="first">First item</option>
<option value="second">Second item</option>
<option value="third">Third item</option>
</select>
<script type="text/javascript">
$(function() {
  $("select#my-foo-select").easyDropDown("select", "third");
});
</script>

Notice how the script should select the third item, but in reality the second item will get selected.

I was not able to set the attribute "disabled" with jquery for easydropdown selects.

The Styles Metro/Flat doesn't work in Google Chrome (Win 8, Version 30.0.1599.101 m).

Default-Style works without problems.

When trying to select a year for example (in the provided demo), the numpad keys do nothing. On a native select element, they act like the normal numeric keys.

Firefox 29 will always have support for 'ontouchend' in document, so it will always be detected as isTouch, thus not rendering any options at all. Only workaround is to set nativeTouch=false at the moment.

Since a class of "dropdown" is used to hook the javascript, it turns any toggle-able drop downs you've made using bootstrap's drop down JS a select box. However, bootstrap only uses their .dropdown class for visual styling.

I would recommend either giving the ability to define your hook name or use a data-attribute rather than a class.

Thanks for the hard work.

Hi,

I want to make disabled option, I tried to use "disabled" attribute but It's not working!

Changing the width of the following is properly working in firefox, however, IE8 is not going beyond 250px even after changing the width from 250px to 400px or any other greater number. Can you please let me know if there is/are any other locations I have to change the code.

How do I increase width of the list box to a desired size in IE8?

.dropdown{
position: relative;
width: 250px;
border: 1px solid #ccc;
cursor: pointer;
background: #fff;
border-radius: 3px;

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

}

Hey Patrick,

i am new to github. I found an error on line 428. If I try starting mutiple Dopdowns the id is not generated correct!

Looks like optgroup is being ignored on desktop browser, works fine on mobile devices. Would be handy if this gets fixed 'opgroups' are incredibly handy for long lists

For example

<select>
<optgroup label="group 1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</optgroup>
<optgroup label="group 2">
<option>option 4</option>
</optgroup>
</select>

Object doesn't support this property or method jquery.easydropdown.js?v=1.2, line 308 character 5
http://minerva2dev.devcloud.acquia-sites.com/node/20

But it works just fine in this page:
http://minerva2dev.devcloud.acquia-sites.com/receitas

Any ideas?
Thanks

How to repeat:

1. Open the menu
2. Press 'F' on the keyboard to select February
3. Press Enter key twice

Managed to show the standard menu on Chrome Version 29.0.1547.57 beta on Kubuntu Linux

If nativeTouch is true, after selecting an option from the iOS spinner, the text never gets updated - it remains as "choose an option...". The value is successfully passed to the select element... but sadly the text never changes.

If I disable nativeTouch, and choose my option from the custom dropdown, the is updated correctly. However, this approach still causes the iOS spinner to open up, and I can't seem to figure out how to suppress that :(

The widget loose the focus on value selection.

Hey Patrick,

First of all great work on the library!

I ran into an issue when setting nativeTouch to false on iOS 7 in Safari and Chrome. When tapping the dropdown the it opens the custom EasyDropDown options as well as the native UI.

I have added a quick fix for that by not focusing old inputs on touch when nativeTouch is set to false (l0wt1de/easydropdown@f9e21c8).

What do you think about that approach? Is there another way how you would solve this problem?

Thanks
Dirk

See screenshot. Firefox 62.0.2

When trying to select a year for example (in the provided demo), you can type 2002 and that value will be selected.

On a native select, there is a slight timeout and if you then type 2012, it will select 2012.

This timeout to reset the search string is missing from easydropdown (I expect that it tries to match 20022012, but I haven't had time to look into the code).

I would be great if this could be added, to provide the most seamless replacement for the native select.

Hi,

When I try to do the following for the option menu, it doesn't redirect me to the site when the option select...

<option value=http://www.google.com>Google</option>

Am I doing something wrong?...

Currently trying to use with Webpack 4.8.1, using import easydropdown from 'easydropdown' I get this error on build

ERROR in ./node_modules/easydropdown/dist/Easydropdown/Easydropdown.js
Module not found: Error: Can't resolve '../Config/Config' in ... node_modules/easydropdown/dist/Easydropdown
 @ ./node_modules/easydropdown/dist/Easydropdown/Easydropdown.js 4:15-42
 @ ./node_modules/easydropdown/dist/Easydropdown/factory.js
 @ ./node_modules/easydropdown/dist/index.js
...

ERROR in ./node_modules/easydropdown/dist/State/State.js
Module not found: Error: Can't resolve '../Config/Config' in ... node_modules/easydropdown/dist/State
 @ ./node_modules/easydropdown/dist/State/State.js 4:15-42
 @ ./node_modules/easydropdown/dist/State/StateMapper.js
 @ ./node_modules/easydropdown/dist/Easydropdown/Easydropdown.js
 @ ./node_modules/easydropdown/dist/Easydropdown/factory.js
 @ ./node_modules/easydropdown/dist/index.js
 ...

There doesn't appear to be a Config directory in node_modules/easydropdown/dist

before upgrading to the latest version I was able to get the value of the select box with the following jquery function

var material = $("select[name=test] :selected").val();

with the new version that does not work anymore

this code doesn't seem to be working self.$select.find('option').prop('selected',false);

Is it possible to set the width automatically according to the content on the menu (widest item)?

I want to style the select label differently from the selection a user makes themselves.

I have implemented this rudimentary code to solve this problem:

        $('#sign_up_form_3 .dropdown').easyDropDown({
            onChange: function( selected ) {
                $(this).parents('.dropdown').find('.selected').removeClass('label');
            }
        });
        $('#sign_up_form_3 .dropdown').each( function( elem ) {
            if ( $(this).find('.old .label').html() == $(this).find('.selected').html() ) {
                $(this).find('.selected').addClass('label');
            }
        });

More broadly speaking, it would be great if easydropdown would carry over any classes assigned to the option elements into the .selected and the ul > li elements.

How could I refresh easyDropdown fields when I refresh then by AJAX?.
I've three selects (Country-State-City) with easyDropDown, but when I change Country, State and City appears without easyDropDown styles and they loose cutOff property.

Could you help me with this? Thank you in advance and sorry for my terrible English.