Getting the Height of an Option Element with JavaScript

Getting the height of an option element?

I believe this is what you want

$(document).ready(function () {
  $("#mySelect").change(function () {
    alert($(this.options[this.selectedIndex]).height());
  });
});

Here is a demo http://jsfiddle.net/xf3wD/

Getting the height of an option element?

I believe this is what you want

$(document).ready(function () {
  $("#mySelect").change(function () {
    alert($(this.options[this.selectedIndex]).height());
  });
});

Here is a demo http://jsfiddle.net/xf3wD/

How can I control the height of an Option element in Webkit?

This is not possible in Chrome, according to the electric toolbox:

Setting padding on an optgroup or
option has no effect in Chrome so you
cannot control the amount of
indentation. You can set the padding
of a select as a whole in Chrome (as
you can with IE8) but it looks really
weird. Unlike IE8 you can click
anywhere in the select to open it even
if it has padding.

How to set max-height of dropdown selection area?

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>

IE Select Box option element height not working

There is no work-around for this aside from ditching the select element

How to increase height of jQueryUI selectmenu?

This is a CSS issue in my book. The jQueryUI team used a span for that element, which is inline. You'll need to change that first. We'll use display: flex so we can easily align child items. Then set height and deal with the text position by aligning items to center.

$(document).ready(function() {

  let testSelect = document.createElement('select');
  let firstOption = document.createElement('option');
  firstOption.text = 'blablablabla...';
  firstOption.defaultSelected = true;
  testSelect.appendChild(firstOption);

  document.getElementById('testDiv').appendChild(testSelect);
  $(testSelect).selectmenu();
});

.ui-selectmenu-button.ui-button {
  display: flex;
  align-items: center;
  height: 100px;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/redmond/jquery-ui.css">

<div id="testDiv" style="width:100px; height:100px;"></div>

---

Related Topics