Dropdown-Arrow disappears

[parascusParticipant]

Hello jqWidget-Team,

in a jqxWindow I have a table where in every cell is either a label or a jqxDropDown. The size of the dropdowns is 100% because I want them to fill out the td areas of the table completly. So the table cell defines the width of the dropdown.

Now I want to adjust the content when the jqxWindow is resized. For this I react on the resize-event of the jqxWindow and change the width of the td-elements. As expected the dropdowns also change to the new size but the problem is that the arrows of the dropdowns disappear. To be more precise, the arrows are in a second line because of wrapping.

How can I create a table layout with dropdowns (and other widgets) so I use the optimum of available area of a window?

Best regards

Stephan

[DimitarParticipant]

Hello Stephan,

Could you, please, show us an example demonstrating the issue (preferably at JSFiddle)?

Best Regards,
Dimitar

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

[parascusParticipant]

Hello Dimitar,

I’ve done a small JSFiddle-Demo which shows the effect. You can see it if you have the jqxWindow expanded on the x axes and than reduce its width. You can see that the arrow sometimes disappear by slowly making the width smaller and if you release the mouse button it sometimes stopps with the arrow not visible.

http://jsfiddle.net/parascus/Jh2Hy/3/

Best Regards and thanks for your help

Stephan

[DimitarParticipant]

Hi Stephan,

This happens when there is not enough space for the arrow. We suggest you set the min-width CSS property of the dropdownlist, i.e.:

<div id='color-field' class='ddl' style="min-width: 25px;"></div>

Best Regards,
Dimitar

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

[parascusParticipant]

Hi Dimitar,

thank you for your response. Unfortunately I can’t confirm a success to the solution because the arrow still disappears occasionally. As you can see in the screenshot below there would be enough space for the arrow. You can also see the arrow blinking when you change the size of the Window. It might be useful and I forgot to mention that I’m using Firefox 29.0.1 but it’s the same under IE 9.0.8112.16421 64-bit

Best Regards

Stephan

[parascusParticipant]

Hi again,

I just found out something about a dropdown with missing arror via Firebug:

• The surrounding div with id size-field has a width of 95% which results in 85px with additional 1px border on each side.
• The div in the surrounding div and also the next level (dropdownlistWrapper) have a with of 100% which is also 85px, this time the border is set to 0px
• The next level is first dropdownlistContent with a with of a width of 81px plus 3px for padding on the left
• The next element is the dropdownlistArrow with 19px

The sum of the widths of the elements under dropdownWrapper is 103px which does not fit into the 85px of the parent-div. Therefore there’s a linebreak and the arrow disappears. After some time or after the change of the displayed tab of the browser there is a kind of refresh so the width of dropdownlistContent is reduced to 62px which then fits into the 85px of the parent-div.

Is that helpful? How can I prevent the linebreak or update the widths so that it fits?

Kind regards

Stephan

[Author]

Posts