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
DropDown in right menu shows dropdown panel misaligned
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
Hi,
@can Could you please check this issue?
Best Regards,
@can Could you please check this issue?
Best Regards,
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
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
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Interesting! I think this issue is related to PrimeReact core. I'll check and get back to you.
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Could you please try appendTo="self" on Dropdown?
Best Regards,
Could you please try appendTo="self" on Dropdown?
Best Regards,
Github Profile: https://github.com/mertsincan
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
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
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
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
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.
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.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests