Content does not adjust when scroll bar is added on accordion item opening

Webix JS
#1

I’ve a page which content resizes properly when I resize the window.
For that I’ve included the following line of code:

webix.event(window, “resize”, function(){all.adjust();});

However:
The page includes an accordion, with all items closed by default. When I open some accordion item, and the content becomes bigger than the window, a scroll bar is added (as expected). In this situation the content width is not automatically adjusted, the scroll bar overlaps the content and a useless horizontal scroll bar is added to the page. If I block that scroll with CSS (overflow-x: hidden), the content becomes slightly cut (namely the up/down arrows in the accordion item bars).

I tried to add some event listeners to the document and to the accordion to force “all.adjust();” when the accordion items are open, but without success.

I also wouldn’t like to force the presence of the scroll bar when it isn’t needed.

Any suggestions?

Thank you.

#2

Could you provide more details - what kind of content is there in your accordionitems - text, Webix views, etc.? Is the accordion initialized in an HTML container or in Webix layout?

I checked it with text content - it does automatically adjust to the accordionitem width during resizing.

You can try using onAfterExpand accordion event to resize/adjust the items dynamically.

accordion.attachEvent("onAfterExpand", function(item_id){ ... });
#3

Thank you. I could fix it with the “onAfterExpand” event.