Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select box html horizontal scroll

I want use select box and when overflow then show scroll in select box

css

#selectbox{
 width:100%;
 overflow: scroll;
 }

HTML

<div style="width:140px;">
    <select name="selectbox" size="5"  id="selectbox">
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
    </select>
</div>

but show just vertical scroll.How can solve this problem?

like image 591
ZSH Avatar asked Jun 22 '13 12:06

ZSH


2 Answers

To see these changes quickly:see here

These are the changes:

  1. First see that I've changed the css from selectbox to that of div.This is because we want to allow scrolling on our div rather than in the selectboxes.
  2. Use

    overflow-x:auto;
    overflow-y:auto;
    
  3. Setting width for div to see the scrolling at work.

  4. Removed width here, as it conflicts previous definition.

To see working demo: see here

like image 128
Aravind Avatar answered Nov 20 '22 16:11

Aravind


All other answers what i searched cant fully hide embedded vertical scrollbar when you try these div tricks (and you got weird double vertical scrollers), at least in Firefox. So i made one, which works, you can have vertical and horizontad scrollbars but i tested only in FF. another issue is what when you move selection by pressing up & down keys and it goes beyond visible area it didnt scroll automatically, so you need to provide your additional JS code to handle that.

.block1 {
  max-width: 100px; 
  max-height: 100px; 
  overflow:auto;
  display: block;
}

.block2 {
  display: inline-block; 
  vertical-align: top; 
  overflow: hidden; 
  border-right: 1px solid #a4a4a4;
}
<div class="block1">
    <div class="block2">
      <select multiple style="margin-right:-17px" size="11">
        <option>123</option>
        <option>1234</option>
        <option>12345</option>
        <option>123456</option>
        <option selected>12345777777777777777777777777777</option>
        <option>123458</option>
        <option>123459</option>
        <option>12345</option>
        <option>1234</option>
        <option>123</option>
        <option>12</option>
      </select>
  </div>
</div>
like image 26
coolcoder Avatar answered Nov 20 '22 14:11

coolcoder