jqxToolBar resizing – don't want wrap – want excess menu button

[ajcsParticipant]

When there are too many buttons on a jqxToolBar to fit in the width it shows the drop down menu button at the end with the extra buttons that won’t fit on
the toolbar on the drop down.

At run time if I resize the page to make and the jqxToolBar get smaller it just wraps the toolbar. I don’t want it to wrap. I want the extra drop down button to appear on the end with the extra buttons that won’t fit on it.

Your example of a resizable toolbar on this page does not work properly. It just squashes down and some of the buttons disappear. The extra drop down button half appears briefly hidden behind another control:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtoolbar/index.htm#demos/jqxtoolbar/javascript-toolbar-resizable.htm

How do I get the resize to work properly as you would expect?

[adminKeymaster]

Hi ajcs,

In order to make the Toolbar resizable, its width should be in percentages as in our example.
If the issue is different, then please share a fiddle which reproduces it. We will create a work item in our Github repo and will fix it.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[ajcsParticipant]

The toolbar takes 100% of the width of the viewport. Each button is a fixed width so where do the percentages come in? If the viewport is narrowed I want the buttons that do not fit to then appear on the dropdown button that should appear at the end. I don’t want my buttons to get narrower so there is no need for percentages.

That does not explain why your demo does not work properly and the expander drop down button half appears behind other controls.

[adminKeymaster]

Hi ajcs,

Takes 100% of the width and the width property is set to percentages are different things. When the width is set in percentages, the Toolbar is in a different responsive mode. Yes, we observe an issue with the popup button of the toolbar which can be fixed by setting the “.jqx-toolbar-minimized-popup” class’s z-index property to 1000.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[ajcsParticipant]

But I don’t want my buttons to get thinner. Anyway at design time if I make the toolbar shorter so the buttons do not all fit on then at run time the expander drop down button does appear with the extra buttons on. So I can’t see why this can’t happen at run time.

Is a workaround to recreate the toolbar every time it is resized? – that sounds messy though.

[adminKeymaster]

Hi ajcs,

The component does not have a design time. It is always in run-time. The only issue we are seeing is regarding the z-index. The workaround is to set the modify the .jqx-toolbar-minimized-popup css class and set the z-index to 1000. We will set it to 1000 by default in the next version, too.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[ajcsParticipant]

Your resizable demo here is still not working properly:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtoolbar/index.htm#demos/jqxtoolbar/javascript-toolbar-resizable.htm

If you select a theme of “Light” the buttons shrink down as the window is made narrower and it has the problems I explained above.

If the select a theme of “Material” the buttons do not shrink and they seem to appear correctly on the overflow dropdown menu. This is how I would expect the control to work.

So why is the theme affecting it?

And when I am using it I don’t get any of the above but just the buttons wrapping onto the next row which I can only see one pixel of.

[ajcsParticipant]

Any news on this yet?

Do only certain themes work and what about custom themes?

[Author]

Posts