CODEWITHSUNDEEP
javascriptphphtmlcssangularjs
J.Do
J.Do

Reputation: 301

Need Scroll Bar for Drop Down List populated by ng-options

I have this code which populates the drop dopwn menu:

echo "<div class='form-group'>";
echo "<label for='show'>Show:</label>";
echo "<select class='form-control' id='filterText' ng-model='filterText' ng-options='show_name for show_name in filterList'>"; // Show Type Dropdown
echo "</select>";
echo "</div>";

enter image description here

I want to be able to only show maybe 8 options then be able to scroll down to see the rest. How do I go about doing this? When I adjust the height, it just adjusts the height of the actual field instead of the drop down size.

This is not what I want:

enter image description here

TURNS OUT IF THE LIST IS LONG ENOUGH, IT WILL AUTOMATICALLY ADD A SCROLL BAR. THIS IS NOT ORIGINALLY WHAT I WANTED. IT WOULD BE EASIER IF THERE WERE 8 SHOWS SHOWN TO START WITH AND BE ABLE TO SCROLL THROUGH THE REST.

Upvotes: 1

Views: 7443

Answers (6)

Kilee
Kilee

Reputation: 1

<div class='form-group'>
  <label for='show'>Show:</label>
  <select size='1' onmousedown='if (this.options.length > 8){this.size = 8}' onchange='this.size = 0' onblur="this.size = 1" class='form-control' id='filterText'>

    <option selected>Select</option>
    <option>Dr. Salunkhe</option>
    <option>Pregnancy</option>
    <option>COVID</option>
    <option>Opthamologist</option>
    <option>Physician</option>
    <option>Orthapedician</option>


  </select>
</div>

Upvotes: 0

Kilee
Kilee

Reputation: 1

 select {
    position:absolute;
 }

<div class='form-group'>
  <label for='show'>Show:</label>
  <select size='1' onmousedown='if (this.options.length > 8){this.size = 8}' onchange='this.size = 0' onblur="this.size = 1" class='form-control' id='filterText'>

    <option selected>Select</option>
    <option>Physician</option>
    <option>Dr. Salunkhe</option>
    <option>Orthopedician</option>
    <option>Opthamologist</option>
    <option>COVID</option>
   
  </select>
</div>

Upvotes: 0

quirimmo
quirimmo

Reputation: 9988

<select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<br>
<select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Upvotes: 1

Gobinath M
Gobinath M

Reputation: 2021

HTMl:

<div class='form-group'>
    <label for='show'>Show:</label>
    <select class='form-control' ng-class="{scrollClass' : show_name.length > 8}"

    id='filterText' ng-model='filterText' ng-options='show_name for show_name in filterList'></select>
</div>

ng-class="{scrollClass' : show_name.length > 8}"

CSS:

 .scrollClass{
            max-height: 300px;
            overflow-y: scroll;
 }

Upvotes: 0

Emre Piskin
Emre Piskin

Reputation: 284

Maybe you can this implement HTML/JS/CSS solution into Angular?

 select {
    position:absolute;
 }
<div class='form-group'>
  <label for='show'>Show:</label>
  <select size='1' onmousedown='if (this.options.length > 8){this.size = 8}' onchange='this.size = 0' onblur="this.size = 1" class='form-control' id='filterText'>

    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option A</option>
    <option>This is another Option 2</option>
    <option>This is another Option 3</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option B</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>

  </select>
</div>

Upvotes: 0

JokingBatman
JokingBatman

Reputation: 66

 select {
            max-height: 300px;
            overflow-y: scroll;
 }

This should do it for you. Adjust max-height as necessary.

Upvotes: 2

Related Questions