Why is this CSS needed to have a properly functioning <DropDownlist> with custom height set via popup-settings prop?

0 Answers 48 Views
DropDownList
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
Vincent asked on 15 Nov 2023, 12:04 PM | edited on 16 Nov 2023, 08:52 AM

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


1f9xdq (forked) - StackBlitz

Vessy
Telerik team
commented on 20 Nov 2023, 11:43 AM

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

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
commented on 21 Nov 2023, 09:23 AM

I see in your demo video that you haven't deleted some of the marked CSS lines or added the wrapping div, when you do so the bug should occur
Vessy
Telerik team
commented on 24 Nov 2023, 08:39 AM

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?

 

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
commented on 24 Nov 2023, 08:42 AM

1f9xdq (forked) - StackBlitz


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>

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
commented on 24 Nov 2023, 08:43 AM

And now the bug occurs where opening the dropdown the page jumps to the top
Konstantin Dikov
Telerik team
commented on 29 Nov 2023, 07:22 AM

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":

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
commented on 29 Nov 2023, 08:11 AM

Yeah I knew about the wrapper fix, but since my <DropDownList>s are often very deeply nested I cant use this fix. 

Thanks for looking into it and I look forward to see if there will be an improved fix in the future
Konstantin Dikov
Telerik team
commented on 04 Dec 2023, 06:24 AM

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".

 

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
commented on 11 Dec 2023, 03:04 PM | edited

Thank you for this workaround Konstantin, are there any plans that in a future release the css won't be necessary anymore?
Konstantin Dikov
Telerik team
commented on 14 Dec 2023, 09:07 AM

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.

No answers yet. Maybe you can help?

Tags
DropDownList
Asked by
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
Share this question
or