JSFiddle - React, Tailwind, and code Playground

by gigi81

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.12/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chosen/0.9.11/chosen.css">
<div id="dialog">
    <select id="chosen" data-placeholder="Select a value in the list below"  style="width:350px;">
        <option></option>
        <option> Value 1 </option>
        <option> Value 2 </option>
        <option> Value 3</option>
        <option> Value 4 </option>
        <option> Value 5 </option>
        <option> Value 6 </option>
        <option> Value 7 </option>
    </select>
    
</div>

CSS

/* This CSS doesn't work on jsfiddle but solve my problem with little dialog ; when the dialog is too high, there is no scroll bar... */
.ui-dialog .ui-dialog-content {overflow:visible !important;}

JavaScript

$(function () {
    
    $('#chosen').chosen();
    
    $("#dialog").dialog({
        modal: true,
        autoOpen: true,
        height: 200,
        width: 510,
        title: 'Ajouter un appel',
        buttons: {
            Fermer : function(){
                $(this).dialog('close');
            }                   
       }
    });
    
});