JavaScript DropDownButton

Set the width property of the jqxDropDownButton. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div style="float:left; margin-right: 10px;" id="dropDownButton">
    <div id='jqxGrid'></div>
</div>

JavaScript

$("#dropDownButton").jqxDropDownButton({
    width: 150,
    height: 18,
    theme: 'energyblue',
    initContent: function () {
        var gridData = [{
            value: 'SYSTEM',
            label: 'SYSTEM'
        }];

        var source = {
            datatype: 'local',
            datafields: [{
                name: 'value',
                type: 'string'
            }, {
                name: 'label',
                type: 'string'
            }],
            localData: gridData
        };


        $("#jqxGrid").jqxGrid({
            width: 200,
            height: 50,
            source: source,
            //    autoheight: false,
            selectionmode: 'checkbox',
            columnsresize: true,
            columns: [{
                text: 'ALL',
                datafield: 'label',
                cellsalign: 'left',
                align: 'center'
            }]
        });

        gridData = [{
            value: 'SYSTEM1',
            label: 'SYSTEM1'
        }, {
            value: 'SYSTEM2',
            label: 'SYSTEM2'
        }, {
            value: 'SYSTEM3',
            label: 'SYSTEM3'
        }

        ];

        source = {
            datatype: 'local',
            datafields: [{
                name: 'value',
                type: 'string'
            }, {
                name: 'label',
                type: 'string'
            }],
            localData: gridData
        };

        $("#jqxGrid").jqxGrid('source', source);
    }
});