primereact
primereact copied to clipboard
primefaces
Dropdown: set the panel's width/position same as the Dropdown
Describe the feature you would like to see added
I would like to limit the panel's width to don't let it grow according to longest item's label. https://codesandbox.io/s/primereact-dropdown-panel-width-yp9v59
Describe the solution you'd like
To have an attribute what will limit panel to it't parent.
Describe alternatives you have considered
Dynamically take in JS the bounding client rect of the dropdown and set panel's style accordingly.
Hi there,
I believe you can already do that with PassThrough options, something like:
https://codesandbox.io/s/primereact-dropdown-panel-width-forked-j8vkpk
That's how I'm doing it.
Yes I described this solution (or kind of). But I believe this should be a bit simpler.
Because to achieve such a simple thing, you need to have extra useEffect and useRef with other (for Dropdown) external code. Also anytime the window is resized for example, I need to change passes width. That is not really good approach.
@dominikj111 the component would have to do all these same things internally so when you say it is NOT a good approach its exactly the same useEffect and code the dropdown would have to do. Or are you saying you just don't want to manage that code?
Actually to be honest I am not sure what your UI/UX use case is for constraining the panel to its input size? The Panel Elements are not related to the input itself so why don't you want the panel showing all the items and instead constraining it to the size of the input? I am just curious as to me your use case here violates UI/UX standards?
I understand that you'll need to do same code as I described, but it looks to me like library responsibility. Or at least, I thought that it would be nice to have it solved by the library self :)
In case you have statically sized grid where the dropdown is located, you know the grid size and you can use the PassThrough, but if the grid is sized by the col-x classes, it is more to do.
Can you post a screenshot I still don't see how the panel size displaying its items has anything to do with the grid size?
I did couple screenshots, but I realised, that I didn't fully understand how this works.
On the link above when I try to change the col-x class of the .card.flex, the panel was reasonably positioned and sized. I saw there is min-width utilised, so the panel will not appear smaller then dropdown self.
I don't like to place the panel to the browser's window left edge (in case of longer item labels), but that is my opinion. It would be great if I can switch it off. But this is included to the feature I'm requesting.
I would like to be able to restrict the panel to dropdown width. If so, I can wrap text labels or hide overflowed (with ellipsis). I think it is about to add `max-width` only as the `min-width` has some value set already (according to dropdown).
The benefit of this approach lies on small screens, where the panel goes out of the screen boundaries, for an example.
Yep I see it. But what is a customer supposed to do if the label is long and you cut it off and they can't read it?
Especially in our case, I'll wrap them. But that is truly something I should to deal with because it depends on the use case.
Main thing is that the panel doesn't allow me to do that unless I'll do mentioned workaround. And because I may need it on multiple places, I'll end with writing a wrapper for the Dropdown component.
But is it not just new simple attribute where the component will raise a panel with max-width set also?
I like that the panel grows. Would it be possible to allow to grow it in range if needed? So min-width is the Dropdown width and max-with would be double or one third of Dropdown width (but too wide to go over the screen)? :smiling_imp:
I like it grows, but not moving to the left edge of the window.
I will leave that up to PrimeTek as whatever they decide it would have to be consistent with PrimeVue and NG
I had had the similar issue. I had needed to shorten the div as horizontal because of too long and long strings. It was full width of the screen almost. Just applied the MultiSelect component instead of Dropdown, and the panel (click-open div) automatically became aligned. Also, you can make this component similar to Dropdown by disabling some features on the site's component feature API.
Hi, you can set the width of the panel to the Dropdown component by using the appendTo property of the Dropdown and set it to self, that way it will be a child of the Dropdown.
<Dropdown
appendTo='self'
/>
