如何根据第二列的内容调整下拉列表每行的高度？

Question

我使用 selectMenu jQuery 小部件创建了一个下拉列表，然后在 Angular 中使用它创建了一个下拉组件，这样我就可以重复使用同一个组件。现在，我面临的问题是下拉列表由 3 列组成，第二列包含每一行的主要内容。现在，每当我增加要放入第二列的内容的大小（长度）时，每行的其他两列的高度都不会动态调整。我对如何解决这个问题感到困惑？下面给出的是我创建的下拉列表的图像，其中行的高度未调整。

这是代码笔页面的 link，其中包含示例和我使用的代码：Codepen Dropdown link。我尝试通过在 CSS 文件中使用 display:table-cell; 来解决这个问题，但我的努力是徒劳的。请建议如何解决此问题。而且。这是我想要的输出。

下面是代码片段。

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
            item.optgroup +
            "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
}

.ui-selectmenu-category::after {
  content: "PRICE";
  float: right;
  padding-right: 40px;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: inline-block;
  padding: 1em 2px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position: absolute;
}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
}

.overflow {
  height: 200px;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
  <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="[=12=].00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="[=12=].00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price=".00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price=".00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price=".00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

Answer 1

您可以使用 display:table 和 display:table-cell

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
              item.optgroup +
              "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-menu .ui-menu-item { 
  display:table; width:100%;
}
.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px .4em;
    border-width: 1px 0 1px 0;
    border-color: transparent;
    border-style: solid;
}
.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
}

.ui-selectmenu-category::after {
  content: "PRICE";
  float:right;
  padding-right: 40px;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: table-cell;
  vertical-align:top
  padding: 1em 2px;
}


.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
    border-width: 1px 0px 1px 0px;
    border-color: #cccccc;
    background-color: #e4ebf1;
    color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
  
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
  
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position:absolute;

}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
 
}


.overflow {
  height: 200px;
}

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
    <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="[=12=].00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="[=12=].00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price=".00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price=".00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price=".00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>
</body>
</html>

Answer 2

非常简单的修复，添加这个：

.ui-menu .ui-menu-item:not(.ui-selectmenu-category) {
  display: flex;
}

Answer 3

根据您的代码添加此 display: flex;

.ui-menu .ui-menu-item {
display: flex;
height: auto;
flex-direction: row;
margin: 0;
cursor: pointer;
list-style-image: 
}

如何根据第二列的内容调整下拉列表每行的高度？

How to adjust the height of each row of the dropdown list based on the content of the second column?

html

css

drop-down-menu

jquery-ui-selectmenu

非常简单的修复，添加这个：