Demo - ComboBox

by Troy Taylor

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>
<script src="https://code.jquery.com/jquery-1.11.3.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>
<link rel="stylesheet" href="https://cdn.wijmo.com/jquery.wijmo-pro.all.3.20162.103.min.css">
<script src="https://cdn.wijmo.com/jquery.wijmo-open.all.3.20162.103.min.js"></script>
<script src="https://cdn.wijmo.com/jquery.wijmo-pro.all.3.20162.103.min.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>
    <div style="display:none" 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>      
    </div>
    
  </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').wijdialog({ 
    minHeight: 600,
  	autoOpen: false,
  	height: 400, 
    width: 400, 
    modal: true, 
    buttons: [
    	{
      	"text": "Close",
      	"click": function () {
      		$(this).dialog('close');
      	}
      }
    ],
    title: 'Broken Dropdowns',
    create: function (ev, ui) { 
    	// create the combo
  		var theComboBox = new wijmo.input.ComboBox('#theComboBox', {
    		displayMemberPath: 'name',
    		selectedValuePath: 'value',
  			itemsSource: theData
		  });
 
  		var dateTime = new wijmo.input.InputDateTime('#theDateTime');
  
  		var date = new wijmo.input.InputDate('#theDate');
  	}
	});
  
  $('#comboDialog').wijdialog('open');
}

var theData;

onload = function() {

	// data used in the combo
	theData = [
  	{ name: 'Zero', value: 0 },
  	{ name: 'Low', value: 10 },
  	{ name: 'Medium', value: 50 },
  	{ name: 'High', value: 100 },
  	{ name: 'Maximum', value: 150 },
  ];
}