Scrollbar is not showing up in dropdown in Chrome

Question

I am facing a weird problem. I have a div like the following.

<div class="dropdown3 dropdown-style" style="overflow-y:scroll">
   <ul class="dropdown-list">
    <li>1k</li>
    <li>5k</li>
    <li>10k</li>
    <li>25k</li>    
    <li>35k</li>                               
  </ul>
</div>

My css is like this:

.dropdown3 {
  position: absolute;   
  top: 30px;  
  background: #fff;  
  left: -15px;  
  z-index: 1;  
  display: none; 
  height:85px;
  max-height:85px;
  overflow:scroll; 
  border: 1px solid #ccc;  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
   border-radius: 5px;    
}

Though it is working in firefox, for some reason it is not working in chrome! Chrome automatically puts style="overflow: hidden;" whereas I explicitly mentioned it to scroll in the div.

`overlow:scroll;` should it not be : `overflow:scroll;` – P Clegg Feb 10 '15 at 11:25 — P Clegg, Feb 10 '15 at 11:25
sorry typo in typing the question. Nope it does not work. – user3001408 Feb 10 '15 at 11:26 — user3001408, Feb 10 '15 at 11:26
how can you see the element with `display: none;`? – P Clegg Feb 10 '15 at 11:27 — P Clegg, Feb 10 '15 at 11:27
I display it dynamically via jquery using class name – user3001408 Feb 10 '15 at 11:29 — user3001408, Feb 10 '15 at 11:29
try `overflow:scroll !important;` – P Clegg Feb 10 '15 at 11:33 — P Clegg, Feb 10 '15 at 11:33
uuhuuu...works man! thanks a lot – user3001408 Feb 10 '15 at 11:34 — user3001408, Feb 10 '15 at 11:34

score 1 · Accepted Answer · answered Feb 10 '15 at 11:35

1

try overflow:scroll !important;

answered Feb 10 '15 at 11:35

P Clegg

677
2
5
18

allows css to override all other methods of changing the style, maybe this helps explain :) http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – P Clegg Feb 10 '15 at 12:17

Scrollbar is not showing up in dropdown in Chrome

1 Answers1