Bootstrap Multi Select Drop Down Menu Timeout

0
When I select on a dropdown (which was created using the “Bootstrap Multi Select” widget), the dropdown disappears very quickly. Is there a way to increase this dropdown time – from disappearing too quickly? The properties of the widget does not have a timeout feature or parameter.
asked
2 answers
1

Hi Lambros,

I think you achieve this with some CSS using animation. You can add some animation on the disappearing element of the dropdown with animation duration set to the time you want it to take to disappear. The exact implementation depends on how this widget is built, but it would look something like this:

.bootstrap-multi-select ul { //Here is assumed the disappearing list is an ul element
animation-name: appear;
animation-duration: 1000ms;
}

@keyframes appear {

0% {display: block;}
100% {display: none;}

}

Hopefully this helps a little, eventhough it is not an exact solution.

For an introduction to CSS animation, you could check: https://www.w3schools.com/css/css3_animations.asp.

For some fancy dropdown animation examples , you could check https://codinhood.com/micro/10-dropdown-menu-animations-css-transform.  

answered
1

Thanks a lot Daan!

The Animation feature didn’t work for me however I used the ‘display: block’ property from your suggestion under the dropdown “:hover” class in my CSS file and worked to what I was expecting. So as long as cursor is over the dropdown menu when expanded, the menu stays in place. Once cursor is out, the dropdown menu closes.

Looks something like this:

.bootstrap-multi-select.dropdown ul:hover {
    display: block;
}

answered