JSFiddle - React, Tailwind, and code Playground

by friek2k

HTML

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="dialog">
    <div id="content">
        <select id="selectmenu">
            <option value="1">ItemWithVeryLongContentTestTestTest</option>
            <option value="2">Item B</option>
            <option value="3">Item C</option>
            <option value="4">Item D</option>
            <option value="5">Item E</option>
            <option value="6">Item F</option>
            <option value="7">Item G</option>
            <option value="8">Item H</option>
            <option value="9">Item I</option>
            <option value="10">Item J</option>
            <option value="11">Item K</option>
            <option value="12">Item L</option>
            <option value="13">Item M</option>
            <option value="14">Item N</option>
            <option value="15">Item O</option>
        </select>
    </div>
</div>

CSS

body {
    font-size: 14px;
}
div.ui-selectmenu-menu ul {
     max-height: 150px;
} 
#selectmenu{

    width:80px;
}

#content{
    height:100px;
    overflow: visible;
}

.ui-selectmenu-menu{
    z-index:100;
    
}

JavaScript

$(function () {
    $("#dialog").dialog();
    $("#selectmenu").selectmenu();
});