Select Options height to auto

Question

I would like to ask on how to make the select list height to auto. Because there's a large white space in the select list. please see

Here's my html code

.form-select {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: pre-line;
  overflow-y: unset;
}

.form-select option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
}

.form-select option:hover {
  background: lightblue;
}

.form-select select {
  text-align-last: center;
  padding-right: 29px;
  direction: rtl;
}

<select data-drupal-selector="edit-keyword" multiple="multiple" name="keyword[]" id="edit-keyword" size="9"
  class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
  <option class="filter-item br-8 f-14-med" value="211">AI</option>
  <option class="filter-item br-8 f-14-med" value="176">Carbon Capture</option>
  <option class="filter-item br-8 f-14-med" value="186">Clean energy</option>
  <option class="filter-item br-8 f-14-med" value="196">COVID-19</option>
  <option class="filter-item br-8 f-14-med" value="216">Digital Twins</option>
  <option class="filter-item br-8 f-14-med" value="201">Digitization</option>
  <option class="filter-item br-8 f-14-med" value="181">Energy Mix</option>
  <option class="filter-item br-8 f-14-med" value="26">Hydrogen</option>
  <option class="filter-item br-8 f-14-med" value="206">IoT</option>
  <option class="filter-item br-8 f-14-med" value="31">Keyword 2</option>
  <option class="filter-item br-8 f-14-med" value="226">LNG</option>
  <option class="filter-item br-8 f-14-med" value="191">Oil ＆Gas</option>
  <option class="filter-item br-8 f-14-med" value="221">Power Plant</option>
</select>

I removed the option inside the select option.

You can try giving a max-height to your select .```.form-select select { height: auto; max-height: 200px; }``` — esQmo_, Sep 26 '21 at 14:40
Thanks for answering esQmo but still the height was not in auto — money_kwarta, Sep 26 '21 at 14:49
Just to clarify for future readers while @MisterJojo is spot on with `type` attributes being not allowed on `option` elements, the `class` attribute is allowed for ALL html elements: https://www.w3.org/TR/2011/WD-html5-author-20110809/global-attributes.html#global-attributes — Jon Humphrey, May 27 '22 at 15:30

dave · Answer 1 · 2021-09-26T14:57:12.957

The height is determined by the size attribute on your select element. size is determined by the number of list items you want visible as a vertical list. Setting it to 3 will give you three lines worth of height.

Additionally, as @Mister Jojo mentioned, use submit for when you're submitting your form. If you want to watch events on your options, add an event listener to them.

This answer also has some options for setting the size dynamically.

.form-select {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: pre-line;
  overflow-y: unset;
  max-height: auto;
}

.form-select option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
}

.form-select option:hover {
  background: lightblue;
}

.form-select select {
  text-align-last: center;
  padding-right: 29px;
  direction: rtl;
}

<html>

<body>

  <select multiple="multiple" name="keyword[]" id="edit-keyword" class="form-select" size="3">
    <option class="filter-item br-8 f-14-med" value="211">AI</option>
    <option class="filter-item br-8 f-14-med" value="176">Carbon Capture</option>
    <option class="filter-item br-8 f-14-med" value="186">Clean energy</option>
    <option class="filter-item br-8 f-14-med" value="196">COVID-19</option>
    <option class="filter-item br-8 f-14-med" value="216">Digital Twins</option>
    <option class="filter-item br-8 f-14-med" value="201">Digitization</option>
    <option class="filter-item br-8 f-14-med" value="181">Energy Mix</option>
    <option class="filter-item br-8 f-14-med" value="26">Hydrogen</option>
    <option class="filter-item br-8 f-14-med" value="206">IoT</option>
    <option class="filter-item br-8 f-14-med" value="31" selected="selected">Keyword 2</option>
    <option class="filter-item br-8 f-14-med" value="226">LNG</option>
    <option class="filter-item br-8 f-14-med" value="191">Oil ＆Gas</option>
    <option class="filter-item br-8 f-14-med" value="221">Power Plant</option>
  </select>

</body>

</html>

Hi Dave, Thank you for answering but still the whitespace was not gone, I already remove the type inside the option but still display still the same — money_kwarta, Sep 26 '21 at 15:01
yes, when if there's a one line in the select option there still a white space — money_kwarta, Sep 26 '21 at 15:44
In that example your `select` doesn't have a `size` attribute. Try adding `size="3"` to it — dave, Sep 28 '21 at 03:01

Select Options height to auto

1 Answers1