8

I am very glad to use this wonderful library - jQuery Nice Select link. But i cant understand why this not support scroll bar especially in google chrome

Chrome :

enter image description here

And Firefox

enter image description here

I can't understand why google chrome doesn't support scroll bar or I should add it somehow?

0

3 Answers 3

11

This isn't related to Firefox or Chrome. You may just be looking at the browsers with different viewports.

In any case, you need to add this to your CSS to add a scrollbar:

.list {
  max-height: 100px; // or whatever the height you want
  overflow-y: scroll !important;
}

Source: tested it myself in both Chrome and Firefox.

6
  • You need to add it to .list, not select. Nice Select creates a <div> from your code that contains a <ul class="list"> inside of it. This is the DOM object that you want to modify with CSS. Commented Jan 25, 2021 at 21:33
  • ye i think it should be .nice-select .list in my nice select css? Commented Jan 25, 2021 at 21:37
  • Don't modify the nice select class, if you update nice select it will delete this code. Put in a separate CSS file or your own CSS file. Just make sure you put overflow-y: scroll !important;. The !important part will override nice select's CSS. Commented Jan 25, 2021 at 21:38
  • and it should have same name Commented Jan 25, 2021 at 21:39
  • It doesn't have to be the same name, you just reference the other CSS file in your HTML Head section. So like <link href="other.css" rel="stylesheet"> Commented Jan 25, 2021 at 21:41
2

I know this is a kind of late, but the accepted answer didn't work for me. I had to use the code below to make it work (maybe for a newer version of library):


    .nice-select-dropdown .list {
        height: 100% !important;
        max-height: 100% !important;
        overflow: auto !important;
    }
    
    .nice-select.open .nice-select-dropdown {
        max-height: 240px; /*or whatever height you want*/
        overflow-y: auto;
        overflow-x: hidden;
    }

-2

Try this out...

NOTE: This hides the scrollbar, so some people who prefer scrollbars over gestures may have some trouble accessing your site


/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Credits w3schools

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.