jQuery Nice Select with scroll bar

Question

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 :

And Firefox

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

score 9 · Accepted Answer · answered Jan 25 '21 at 21:24

9

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.

answered Jan 25 '21 at 21:24

Thomas Yamakaitis

417
2
6
20

You need to add it to `.list`, not `select`. Nice Select creates a `
` from your code that contains a `
` inside of it. This is the DOM object that you want to modify with CSS.
– Thomas Yamakaitis Jan 25 '21 at 21:33
ye i think it should be `.nice-select .list` in my nice select css? – Nikola Marinov Jan 25 '21 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. – Thomas Yamakaitis Jan 25 '21 at 21:38
and it should have same name – Nikola Marinov Jan 25 '21 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 `` – Thomas Yamakaitis Jan 25 '21 at 21:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227816/discussion-between-thomas-yamakaitis-and-nikola-marinov). – Thomas Yamakaitis Jan 25 '21 at 21:41

score -2 · Answer 2 · answered Jan 25 '21 at 21:11

-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

answered Jan 25 '21 at 21:11

Manu G

158
5
13

but i want to add scroll bar – Nikola Marinov Jan 25 '21 at 21:14
https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – Manu G Jan 25 '21 at 21:20
This answer is not right. @Nikola is asking to add a scrollbar for a specific library. – Thomas Yamakaitis Jan 25 '21 at 21:39

jQuery Nice Select with scroll bar

2 Answers2