Dropdown DOM attachment

asked 2021-05-04 17:14:11 +0800

AndreiArdei gravatar image AndreiArdei
101 2

updated 2021-05-04 17:15:17 +0800

Good morning,

I have a Window, which ultimately houses multiple comboboxes. The issue that i am running into is that whenever opening the dropdown of a combobox, the dropdown DOM element is not attached as a child to the combobox (even though before opening it, it was) and is attached as a child to the body of desktop.

This issue means that whenever i scroll, the dropdown element also scrolls with the page instead of staying fixed in place. (since it's either fixed, or has absolute position relative to the body of the page)

Link to images (opens Imgur) https://imgur.com/a/TRvr6Bz

delete flag offensive retag edit


Which ZK version are you with?

jeanher ( 2021-05-04 18:49:02 +0800 )edit

Currently on version but also testing with version 9

AndreiArdei ( 2021-05-04 22:14:14 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted

answered 2021-05-05 10:07:01 +0800

hawk gravatar image hawk
3023 1 5
http://hawkphoenix.blogsp... ZK Team

If your window is scrollable e.g. <window contentStyle="overflow:auto">, then by default, the popup, error box popup will not move by scrolling inside a window (keep at the fixed position). But if you scroll the whole page, the popup still moves with scrolling. I can't tell which case is yours from your screenshot. (I have grant you uploading)

If you want the popup moves by scrolling inside a window, please add ca:data-scrollable="true", please refer to https://www.zkoss.org/wiki/ZUML%20Reference/ZUML/Namespaces/Client%20Attribute/Data-Scrollable

link publish delete flag offensive edit

answered 2021-05-05 17:31:52 +0800

AndreiArdei gravatar image AndreiArdei
101 2


Thanks for the answer. I had a look yesterday and the situation is a bit different than what i initially explained. We do not use the ZK version of a window but instead we rely on CSS and create our own "window" based on a DIV element. This means I don't have direct access to the ca:data-scrollable="tre". Changing the whole layout in the favour of a ZK based one is too extensive for this. I unfortunately can't upload a video to demonstrate the issue but i will once again add a link to the video.

Link to demonstration video

As you can see in the video, the combobox component already has a popup div attached to it that is set to display:none and has no children. When opening the combobox, the div gets automatically moved by ZK to the body of the DOM.

link publish delete flag offensive edit

answered 2021-05-06 17:12:49 +0800

hawk gravatar image hawk
3023 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-05-06 17:25:03 +0800

the popup is hidden at first. when poping up, zk keeps updating the popup's position upon onScroll event with ca:data-scrollable="true". If it's under a HTML <div>, there is no such a feature.

But I have created a feature request https://tracker.zkoss.org/browse/ZK-4894

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2021-05-04 17:14:11 +0800

Seen: 13 times

Last updated: May 06 '21

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More