【发布时间】：2017-12-21 18:53:31
【问题描述】：
我使用 selectMenu jQuery 小部件创建了一个下拉列表，然后在 Angular 中使用它创建了一个下拉组件，以便我能够重用相同的组件。现在，我面临的问题是下拉列表由 3 列组成，第二列包含每一行的主要内容。现在，每当我增加要放入第二列的内容的大小（长度）时，每行其他两列的高度都不会动态调整。我很困惑如何解决这个问题？下面给出的是我创建的下拉列表的图像，其中行的高度未调整。
这里是 codepen 页面的链接，其中包含示例和我使用的代码：Codepen Dropdown link。我尝试通过在 CSS 文件中使用 display:table-cell; 来解决此问题，但我的努力白费了。请建议如何解决此问题。而且。这是我想要的输出。
下面给出的是代码 sn-p。
$(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="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
<option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
</optgroup>
<optgroup label="STANDARD OPTIONS">
<option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
<option data-short="K" data-price="$6.00" >Handknob</option>
</optgroup>
<optgroup label="ADDITIONAL OPTIONS">
<option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
</optgroup>
</select>
</body>
</html>【问题讨论】：
-
使用
Flex-box。添加您的代码sn-p。 -
@Meraj Khan，添加了它。现在，请告诉我如何使用 flex-box
标签： html css drop-down-menu jquery-ui-selectmenu