How to set max-height of dropdown selection area?

Question

In vuejs2 app having select input with rather big options list it breaks design of my page on extra small devices. Searching in net I found “size” property, but that not what I I need : I want to have dropdown selection, which is the default. Are there some other decision, maybe with CSS to set max-height of dropdown selection area.

Modeified PART # 1: I made testing demo page at http://photographers.my-demo-apps.tk/sel_test it has 2 select inputs with custom design and events as in this example link How to Set Height for the Drop Down of Select box and following workaround at js fiddle:

select{
    color: red;
}

<select onfocus='this.size=10;' 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>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
</select>
<div>Popular Tags:</div>

are applied to the second select input and it does not look/work properly. I suppose it conflicts somehow with current desing. Can it be fixed somehow?

as that is vuejs2 page I know that there are some select components at https://github.com/vuejs/awesome-vue#select and I used some of them, like vue-select but I need to keep custom design so I try to use original select input...

Modified PART # 2 : I added 2 classes definitions :

.select-wrapper {
    height: 50px !important;
    overflow-y: visible !important;
    background-color: yellow !important;
}

.select {
    width: 100% !important;
    /* make it min-height*/
    min-height: 50px !important;
    border-radius: 25px !important;
    border-color: #555 !important;
    padding: 10px  !important;
    border:2px dotted red !important;
}

Also I set background-color and border to these classes to be sure that these classes are applied and !important to all properties. But it did not help. Could you please to take a look!

Thank you!

Answer 1

Specifying height:50px is limiting the select to 50px. Use min-height instead. Also wrap the select element in a div with fixed height so that it'll overlap on content below and not push it down.

.select-wrapper {
  height: 50px;
  overflow-y: visible;
}

.select {
  width: 100%;
  /* make it min-height*/
  min-height: 50px;
  border-radius: 25px;
  border-color: #555;
  padding: 10px;
}

<span>Select height is limited to 8 options.</span>
<div class="select-wrapper form-column form-column-field">
  <select data-no-search="" data-placeholder="Выбрать год" onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" class="select select-no-search">
    <option disabled="disabled">
      <font style="vertical-align: inherit;">-Select Year</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1922</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1923</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1924</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1925</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1926</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1927</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1928</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1929</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1930</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1931</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1932</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1933</font>
    </option>
  </select>
</div>
<div class="footer__block" style="background-color:wheat;height:200px;border:2px dashed green">
  <h3>Popular tags:</h3>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.
</div>

---

Fix for PART 2: In .selectCSS rule, either remove height:50px from main.css or in frontend.css add height: auto !important;.
Also you forgot to add onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" to the select which you are highlighting.

I've done above changes, locally, on your page using Dev Console, and here is how it looks:

Answer 2

Unfortunately, you cannot chant the height of a dropdown list (while using <select>). It is confirmed here.

you can build it yourself using divs & v-for (assuming you get the list from an outsource) and then you can style it as you wish.

apologies for barring bad news.

Answer 3

TL;DR

It is not possible.

Input elements and, in particular, drop-down lists are deeply anchored to the operating system on which they are executed. This can be seen quickly if you select a drop down list on an iPhone or Linux system, for example. One idea would be to build your own list with JS and CSS. There may already be ready-made solutions on GitHub and colleagues.

Answer 4

Unfortunately, you cannot do that. The other way possible is using bootstrap dropdowns or creating your own dropdown using divs and setting onClick on those.