If my "Devextreme DropDownBox with embedded TreeView" contains only a few root elements and many child elements and all nodes are collapsed by default, then the corresponding overlay will have a very limited height.
When the user collapses a node with many sub-nodes, then he will see a tiny popup with a tiny scrollbar - even if his browser window would allow a larger popup.
How can I let the Popup of the TreeView grow, when the user expands nodes?
Reproducible with these steps:
* Go to https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownBox/SingleSelection/jQuery/Light/ with a current Chrome installation
* Open the TreeView-DropDown
* Collapse "Stores"
* Close the TreeView-DropDown
* Open the TreeView-DropDown
* Try to select "Super LED 42"
Thanks a lot in advance, please do not hesitate to ask, if any further information / code examples would be helpful.
Hi,
Thank you for pointing out this issue to us. We need additional time to research this behavior in greater detail.
At the moment, I suggest you set a fixed height to the dropdown using dropDownOptions.
Let me know if this solution is suitable
Hi,
We investigated this scenario and didn't found a quick way to fix this behavior at the widget level. The issue requires refactoring a lot of internal code and we cannot give you any estimates at the moment.
In the meantime, we found that it's possible to overcome this issue by using the following CSS rules:
.dx-popup-content { height: auto!important; flex: 1 } .dx-overlay-content { display: flex!important; }Please review the following example - https://codepen.io/anon/pen/wYZoyy
Let us know if this solution helps.
Thanks a lot for your investigations - the codepen works like a charm and would be a very nice solutions for our users!
However, when integrating it into our application, these style classes always effect all popups. Some other popups (user dialogs, with title, etc) looked displaced.
Is it possible to only apply those styles to the popups of a certain DropDownBox in our angular 6 application?
Hi,
It's possible to define the container option using the dropDownOptions setting and display the drop-down window inside the main element. This way, you can make the suggested CSS rules specific to the current editor.
For instance, check the following example