igCombo 15.1 dynamic drop-down width

Auto drop-down width with styles applied for min/max values and top border.

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<style>
    /* placed here for override wihtou !imporatnat*/
    .ui-igcombo-list{
        min-width: 200px;
        max-width: 500px;
        /* optional top border */
        border-top: 1px solid #bcbcbc;
    }
     .ui-igcombo-list.ui-igcombo-no-border{
           border-top-width: 0;
     }
</style>

<div id="combo"></div>

JavaScript

$(function () {

            var data = [
                      { "ID":1, "Name": "John Smith larger name item", "Age": 45 },
                      { "ID":2, "Name": "Mary Johnson", "Age": 32 },
                      { "ID":3, "Name": "Bob Ferguson", "Age": 27 },
                      { "ID":6, "Name": "John Smith even larger name item", "Age": 66 }
                ];
            
            $("#combo").igCombo({
                dataSource: data,
                valueKey: "ID",
                textKey: "Name",
                dropDownWidth: "auto"
            });
        });