Rank 3
Iron
Iron
Iron
Hello, I'm trying to understand why the following lines of CSS are needed for the DropDownList (configured with filtering and custom height set via popup-settings) to work.
If I uncomment any of these CSS lines, the following unwanted behavior occurs:
1: scroll down a bit, like 100 or 200px so that the the DropDownList button is close the top of the viewport
2: click on the dropdown button
3: notice that the entire page scrolls to the top, almost as if the DropDownlist tried to open to top first but then mid-animation opened to the bottom.
Specifically the scrolling to the top of the page, is a behavior I'm trying to prevent.
Adding the extra lines of CSS is not a problem for me, however when the Vue app's mount target is nested, the unwanted behavior can be observed again. In the stackblitz you can demo this by nesting the mount target inside a <div>. Because my app's mount target is really deeply nested inside a DOM I don't think it's viable to add CSS styles to every wrapping element.
Is there a workaround for this? Thanks in advance
Hi, Vincent,
I tested the provided sample but no undesired scrolling occured at my end. Can you take a look at the video from my test below and see whether I am not leaving any step out?
Regards,
Vessy
Hi, Vincent,
Are you referring only the following setting or should I remove anything else from the page? I am asking you as removing the below still does not lead to scrolling problems at my end:
:popup-settings="{ height: '200px', }"Can you send me an updated version of the project where all needed parts are removed so I can reproduce the issue and test you further?
I simply changed the code in index.html to this:
<style> body { /* position: relative; */ } html, body { /* try to delete the line below */ /* height: 100%; */ } #app { /* try to delete the line below */ /* height: 100%; */ /* try to delete the line below */ /* overflow: auto; */ } </style> </head> <body> <!-- or try to nest #app in a div --> <div> <div id="app"></div> </div> <!-- built files will be auto injected --> </body>Hi Vincent,
Thank you for providing an example demonstrating the issue.
After testing the scenario we were able to observe the scroll jump and it indeed seems to be related with the missing height and overflow of the parent containers of the app and the fact that the DropDownList element will be focused on click and will append its popup container within the body.
We will have to investigate this further to see if we can provide a fix for it.
Meanwhile you can add the same height and overflow to the wrapping element of the "app":
Thanks for looking into it and I look forward to see if there will be an improved fix in the future
Hi Vincent,
It is sufficient to add the styles up to the first element within the DIV, without going further down to the DropDownList. The component can be nested within the app without adding any further styles:
The issue is not observed if the first element within the "body" is also with height 100% and overflow "auto".
Hi Vincent,
Here is a link to the public issue where you can follow its progress:
As for a timeframe, at this point we could not provide any specific milestone for the issue in question.