DropDown in right menu shows dropdown panel misaligned

Forum rules
Please note that response time for technical support is within 3-5 business days.
napolonia
Posts: 5
Joined: 07 Mar 2021, 15:57

21 Apr 2021, 04:02

Hello, i have a problem with the dropdown in the right menu it shows misaligned and if i scroll the page it goes up, i can't reproduce this problem in the online demo (https://www.primefaces.org/diamond-react/#/) but i can do it with the source in my local machine:

https://drive.google.com/file/d/1Yx_40I ... sp=sharing
https://drive.google.com/file/d/1MxSnbn ... sp=sharing

The links provides a image of the problem
Thanks

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

27 Apr 2021, 09:56

Hi,

@can Could you please check this issue?

Best Regards,

mcandu
Posts: 107
Joined: 20 Jan 2021, 16:31

04 May 2021, 14:22

Hi,

Sorry for the latency. I couldn't reproduce the issue. Could you give more information that I can reproduce this issue ? Like changes on right panel you did for your project.

napolonia
Posts: 5
Joined: 07 Mar 2021, 15:57

04 May 2021, 15:28

Hi, nice to meet you

No problem, I didn't make any changes in the project, I only updated the primereact version to the last published which is 6.3.1 and the project itself comes with the version 6.2.1.
I am attaching a public url to my google drive where I uploaded a gif with the steps to reproduce two problems. One is the dropdown list misaligned and the other is the dropdown list getting out of the combo scope when the screen is being scrolled.

https://drive.google.com/file/d/1sWhGWp ... sp=sharing

PS: The file is a little big so it may take a few seconds to download
Thanks

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

05 May 2021, 16:15

Interesting! I think this issue is related to PrimeReact core. I'll check and get back to you.

Best Regards,

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

31 May 2021, 13:31

Hi,

Could you please try appendTo="self" on Dropdown?

Best Regards,

napolonia
Posts: 5
Joined: 07 Mar 2021, 15:57

03 Jun 2021, 16:24

Hello
Yes i could try, but that doesn't works when im using a component that use a dropdwon, for example, a table with a dropdown used to set the page size:

https://drive.google.com/file/d/1_yN_C8 ... sp=sharing

mcandu
Posts: 107
Joined: 20 Jan 2021, 16:31

04 Jun 2021, 16:10

Hi, I've tried your case on Diamond-React with v6.3.1 and paginator dropdown works fine on my end. Could you please create your case on Diamond's Empty Page and send us only your this js file but not entire project.

napolonia
Posts: 5
Joined: 07 Mar 2021, 15:57

12 Jun 2021, 23:26

Please follow this steps to reproduce the error:

1.- Grab a copy diamond prime react template
2.- Install the desiredes dependencies
3.- Update primereact to the last version
4.- Comment the file dashboard.js from line 235 to line 483 (we want to remove the vertical scrollbar with this change)
5.- Run the app
6.- Click on the right bar to show it and then click on the dropdown with the text *****24

If you follow these steps you will get the error

napolonia
Posts: 5
Joined: 07 Mar 2021, 15:57

13 Jun 2021, 13:33

I was able to find the problem with the dropdown, this is related to the property appendTo and the way that the DropDownPanel is created.

If you omit the appendTo property, the DropDownPanel is created with the property "display: block" and appends to the end of document.
This behavior sometimes makes the vertical scrollbar appear in the browser when it doesn't have enough available space in the viewport. The problem with this is that the position that the DropDownPanel will be placed is calculated when the vertical scrollbar is showing and then, when its placed in position, the vertical scrollbar disappears so you get a difference in pixels beacuse you do the calcs considering the vertical scroll bar.
I think you should create the DropDownPanel with the property "display: none" or the "visibility: hidden" so it won't make the vertical scrollbar appear and then, once it is placed in the right position, make it appear.

Post Reply

Return to “Diamond - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests