List Box sometimes not rendering conent full width

[tmcneillParticipant]

I have a list box that is set to 100% width. Occasionally, it won’t render the contents full width. The border and background render at 100% width, but the list items and scroll bars render as if the widget were only ~100px wide. Here’s a screenshot: ( http://imgur.com/a/hizAX )

I first noticed it happening when the list box was inside an element that wasn’t visible on page load (like part of a hidden tab). But it’s also occasionally happened when it’s visible on page load as well. It renders correctly most of the time. But it’s broken enough times that it’s usually reproducible after a few page reloads.

I’ve found that calling the .jqxListBox(‘refresh’) function fixes the issue. I figure I could just call the refresh function on all list boxes on a page shortly after they load. It would probably fix the problem, but it seems like an unnecessary hack. Any idea what causes this to happen?

Here’s how I’m creating the list box:

    var disabled = false;

    var items = [
      {value: 'example', label: 'item'},
      {value: 'other', label: 'example item'},
    ];

    var widget = $('{some selector}');

    widget.jqxListBox({
      source: items,
      itemHeight: 20,
      height: 200,
      autoHeight: (items.length < 10),
      multiple: true,
      valueMember: 'value',
      displayMember: 'label',
      disabled: disabled,
      width: '100%',
    });

Any help would be appreciated. Thanks.

[tmcneillParticipant]

After a little more investigation, I’ve found the same problem also sometimes occurs with the jqxDropDownList and jqxComboBox widgets. It’s just less noticeable. There are probably other affected widgets as well.

[HristoParticipant]

Hello tmcneill,

Could you provide us whole example that demonstrate this issue?
We test this shared part of code but everything looks ok.
Also could you try to update to the latest version.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[paolotranParticipant]

This happened to me as well. I’m using v5.7.2. The workaround I’m using is a refresh as well. This is the piece of code I’m currently using.

positionsListBox.jqxListBox({
                        displayMember: 'Title',
                        itemHeight: 70,
                        height: 210,
                        width: '100%',
                        source: new $.jqx.dataAdapter(
                            {
                                localdata: result,
                                datatype: "json",
                                datafields: [
                                    { name: 'Id', type: 'int' },
                                    { name: 'Title', type: 'string' },
                                    { name: 'Description', type: 'string' },
                                    { name: 'StartDate', type: 'date', format: 'dd-mm-yy' },
                                    { name: 'RoleId', type: 'int' },
                                    { name: 'EndDate', type: 'date', format: 'dd-mm-yy' }
                                ],
                                id: 'Id'
                            })
                    })

[HristoParticipant]

Hello paolotran,

I tested this example and it seems to work fine (on the newest version).
Could you clarify it?
We recommend using the latest version of jQWidgets: http://www.jqwidgets.com/download/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts