0

I have a select Element containing 24 Options. When I click on it, it opens, displaying 20 options and a scrollbar on the right. How can I make the Element display all 24 options and no scrollbar?

<select>
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
  <option value=4>4</option>
  <option value=5>5</option>
  <option value=6>6</option>
  <option value=7>7</option>
  <option value=8>8</option>
  <option value=9>9</option>
  <option value=10>10</option>
  <option value=11>11</option>
  <option value=12>12</option>
  <option value=13>13</option>
  <option value=14>14</option>
  <option value=15>15</option>
  <option value=16>16</option>
  <option value=17>17</option>
  <option value=18>18</option>
  <option value=19>19</option>
  <option value=20>20</option>
  <option value=21>21</option>
  <option value=22>22</option>
  <option value=23>23</option>
  <option value=24>24</option>
</select>

https://jsfiddle.net/4bxek3v2/

Pete
  • 57,112
  • 28
  • 117
  • 166
Lokomotywa
  • 2,624
  • 8
  • 44
  • 73
  • AFAIK the actual popup for the ` – Zudo Dec 04 '18 at 13:20

2 Answers2

3

Based on SanRyu's answer, you can set the size just when needed, and reset it when you don't. You need a bit of JS for that though.

<select onfocus="this.size=24;" onblur="this.size=1;" onchange="this.size=1; this.blur();">`

Depending on the browser, a (disabled) scrollbar is still shown, but the height is correct now.

Demo: https://jsfiddle.net/4bxek3v2/5/

--

Edit: to hide the scrollbar, use this CSS: select { overflow: visible !important; }

elveti
  • 2,316
  • 4
  • 20
  • 27
2

Use this (How to Set Height for the Drop Down of Select box): 

<select size="24">

https://www.w3schools.com/tags/att_select_size.asp

SanRyu
  • 210
  • 1
  • 2
  • 13
  • This does not work. It creates a select box displaying 24 Elements from the very beginning - before I open it by clicking. – Lokomotywa Dec 04 '18 at 13:21
  • You should search google first.. and not -1 people: https://stackoverflow.com/questions/23534440/how-to-set-height-for-the-drop-down-of-select-box – SanRyu Dec 04 '18 at 13:31
  • @SanRyu If you feel that is a duplicate, you should vote to close as a duplicate. If it needs some alteration/differs reference is OK but explain the difference in the answer. – Mark Schultheiss Dec 04 '18 at 13:40
  • @SanRyu I did not downvote you. – Lokomotywa Dec 04 '18 at 13:43
  • @Mark Schultheiss I flagged this post as duplicate for faster problem solving ! Isn't that enough ? And it doesn't need any other explication, everything that he needs is explained in that post. – SanRyu Dec 04 '18 at 13:45
  • @Ferenjito someone did, and it wasn't nice... I just trying to help :) – SanRyu Dec 04 '18 at 13:46