jQuery UI Widgets › Forums › Lists › ComboBox › ComboBox auto width

Tagged: , , , , ,

This topic contains 4 replies, has 3 voices, and was last updated by  GregoryHouseMD 8 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    ComboBox auto width Posts
  • December 23, 2013 at 10:06 pm ComboBox auto width #46923

    natas123
    Participant

    Hello

    First, thanks for these fantastic components.

    We are currently using the library uniformjs “combobox and text input” as we provide a property that fits the width of the combobox to the longest option and would like to leave this library and use the combobox and text input of jqwidgets but we need these property “auto width”.

    There is a property to do this with jqwidgets, have seen the api and only allow a width in px or %, but do not have a fit.

    Thanks and sorry for use google translator, 🙂

    January 2, 2014 at 10:17 am ComboBox auto width #47129

    Dimitar
    Participant

    Hello natas123,

    The width of the options dropdown list can be controlled by setting the dropDownWidth property. However, there is no way to automatically set it to the width of the longest option, unfortunately.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    March 11, 2016 at 7:19 pm ComboBox auto width #82384

    GregoryHouseMD
    Participant

    Hello Dimitar,

    The combobox I’m using has autocomplete set to true. Can I catch an event that is fired when the search is completed and set the dropdown width to the value of the width of widest list item?

    Regards

    March 14, 2016 at 6:04 am ComboBox auto width #82403

    Dimitar
    Participant

    Hello GregoryHouseMD,

    If you have implemented a remote search functionality, you can use the data adapter’s loadComplete callback function as the “event” you need:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                url: "http://api.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    username: "jqwidgets"
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data)
                    {
                        if ($("#jqxcombobox").jqxComboBox('searchString') != undefined)
                        {
                            data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString');
                            return data;
                        }
                    },
                    loadComplete: function ()
                    {
                        var records = dataAdapter.records;
                    }
                }
            );

            $("#jqxcombobox").jqxComboBox(
            {
                width: 250,
                height: 25,
                source: dataAdapter,
                remoteAutoComplete: true,
                autoDropDownHeight: true,
                selectedIndex: 0,
                displayMember: "name",
                valueMember: "countryName",
                renderer: function (index, label, value)
                {
                    var item = dataAdapter.records[index];
                    if (item != null)
                    {
                        var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                        return label;
                    }
                    return "";
                },
                renderSelectedItem: function (index, item)
                {
                    var item = dataAdapter.records[index];
                    if (item != null)
                    {
                        var label = item.name;
                        return label;
                    }
                    return "";
                },
                search: function (searchString)
                {
                    dataAdapter.dataBind();
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <span>Search for a City:</span>
        <div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox">
        </div>
        <span>ex: be</span>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    March 27, 2016 at 10:34 pm ComboBox auto width #82868

    GregoryHouseMD
    Participant

    Found a solution. The framework pretty much does all the work because the width of the list elements in hardcoded, so something like this does the trick:

    $scope.cb.settings = {
           // other setup
            bindingComplete: function(event) {
               $scope.cb.settings.dropDownWidth = $("#innerListBox" + event.owner.id + " div[role=option] span")[0].style["width"];
               $scope.cb.settings.refresh(["dropDownWidth"]);
            }
        };

    That width is without the width of the scroll bar, I’ll look into that one next, but for now it is a pretty neat solution.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.