0

I have a HTML dropdown structure. With the following:

 <div class="tl_l">
<div class="labeled"><label for="pers_il">İl</label></div>
<select id="ad_il" name="pers_il" class="">
<option>İstanbul</option>
<option>Ankara</option>
<option>Adana</option>
<option>Adıyaman</option>
<option>Aydın</option>
<option>Muğla</option>
<option>Eskişehir</option>
<option>Konya</option>
<option>Denizli</option>
<option>Bitlis</option>
<option>Yozgat</option>
<option>Antalya</option>
<option>Muğla</option>
</select>
</div>

And use JGD Dropdown jquery plugin for i custom dropdown. But my list is too long. So, i want add custom scollbar on this list. Installed Tiny Scrollbar and add my HTML. CSS:

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

JS:

<script type="text/javascript">
    $(document).ready(function(){

        $('#scrollbar1').tinyscrollbar();

    });
</script>

And add scrollbar1 id after opening select tag but don't work. When checked any erros via Firebug, not found. How can i use this plugin on my structure?

Karmacoma
  • 658
  • 1
  • 13
  • 37
  • When you ask a question that requires this much code, it is often helpful to include a http://jsbin.com/, http://jsfiddle.net/, or http://codepen.io – whitneyit Feb 22 '13 at 14:25

1 Answers1

1

to enable your browser's built in scrollbar, ensure that you specify both the height of the container and the overflow 



#scrollbar1 { 
  width: 520px; 
  clear: both; 
  margin: 20px 0 10px;
  height: 400px;
  overflow-y: auto;
}


        
        

            

                

                
                

                    
                    
                        


    
    
        
    
    

        ilan berci
        
    
            
  • 3,883
    • 
            
  • 1
    • 
            
  • 16
    • 
            
  • 21
    •