Filament•2y ago

Select form component position function not working

v2.16.51 merged the "position()" function on the select. Allowing you to put the dropdown above (top) or below (bottom) the input. https://github.com/filamentphp/filament/pull/4953/files But it doesn't seem to work (anymore). When i use ->position('top'), the dropdown is still at the bottom.

.choices__list--dropdown,
.choices__list[aria-expanded] {
    @apply invisible absolute top-full z-[1] mt-2 w-full overflow-hidden break-words rounded-lg border border-gray-300 bg-white shadow-sm will-change-[visibility];
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    @apply invisible absolute top-full z-[1] mt-2 w-full overflow-hidden break-words rounded-lg border border-gray-300 bg-white shadow-sm will-change-[visibility];
}

In the CSS the top-full class puts it always below the input. i believe this should change to bottom-full based on the position attribute of the field. Am i correct? or am i missing something?

4 Replies

Dan Harrin•2y ago

ideally our CSS shouldnt affect this it should be part of the choices.js library which should also reposition the select if it goes off screen

RemiOP•2y ago

I'll be willing to create a PR, if you can point me in the direction you think the solution should be. Because right now i think filament overrides the choices.js by using css (right?)

Dan Harrin•2y ago

i dont think anything has changed since that pr was made though so im confused have you asked your colleague who made the pr how he got it working originally?

Unknown User•2y ago

Message Not Public

Gaming

Programming

Select form component position function not working