I utilized the selectMenu jQuery widget to create a dropdown list and then incorporated it into Angular to build a reusable dropdown component. The issue I am currently dealing with is related to the height adjustment of the columns within each row of the dropdown list. Specifically, the content in the 2nd column is causing the other two columns to not adjust dynamically when the content length increases. I am unsure of how to resolve this problem. The image below shows the dropdown list with the unadjusted row height.
https://i.sstatic.net/tLkvA.png
For reference, here is the link to the codepen page containing the example and code I used: Codepen Dropdown link. I attempted to fix this issue by applying display:table-cell; in the CSS file, but my efforts were unsuccessful. I would appreciate any suggestions on how to resolve this issue. Additionally, the desired output can be seen in the following image.
https://i.sstatic.net/gdU87.png
Below is the code snippet.
$(function() {
$.widget("custom.mySelectMenu", $.ui.selectmenu, {
// code here
});
// additional code here
});.ui-selectmenu-category {
// CSS code
}
// more CSS code here
<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</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>