Demo - ComboBox
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
<h3>
ComboBox not displaying menu dropdown properly in Dialog
</h3>
<button id="dialogButton" type="button" onclick="openDialog()">
Open Dialog
</button>
<dialog id="comboDialog">
<div>
Input controls in a dialog
</div>
<div id="theComboBox"></div>
<div id="theAutoComplete"></div>
<div id="theDateTime"></div>
<div id="theDate"></div>
<button type="button" id="cancel" onclick="closeDialog()">
Cancel
</button>
</dialog>
</div>
CSS
label {
width: 150px;
text-align: right;
}
label + div {
display: inline-block;
max-width: 160px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
body {
margin-bottom: 36pt;
}
JavaScript
function openDialog() {
$('#comboDialog').dialog();
}
onload = function() {
// data used in the combo
var theData = [
{ name: 'Zero', value: 0 },
{ name: 'Low', value: 10 },
{ name: 'Medium', value: 50 },
{ name: 'High', value: 100 },
{ name: 'Maximum', value: 150 },
];
// create the combo
var theComboBox = new wijmo.input.ComboBox('#theComboBox', {
displayMemberPath: 'name',
selectedValuePath: 'value',
itemsSource: theData
});
var theAutoComplete = new wijmo.input.ComboBox('#theAutoComplete', {
displayMemberPath: 'name',
selectedValuePath: 'value',
itemsSource: theData
});
var dateTime = new wijmo.input.InputDateTime('#theDateTime');
var date = new wijmo.input.InputDate('#theDate');
}