[V2] Multiple select: position selected items below search field

[kokoshneta]

Package

Form builder

Package Version

v2.17.55

How can we help you?

When looking at the V2 docs for multi-select dropdowns, this is what the component looks like with a few options selected:

When I implement a multi-select dropdown in my Admin Panel, this is what it looks like:

Note how the selected option is positioned above the search field instead of beneath it (and how there’s no separating line between the two).

I would prefer the layout shown in the docs, but I can’t find a method or property to switch. The Select component has a position() method, but it’s not documented, and I can’t really figure out what it’s supposed to do. It expects a string or closure parameter, and the string values I’ve tried with have made no discernible difference (including when inspecting the Alpine component on the loaded page).

So how do I get the results after the search field like in the docs?

[elabx]

Hi @kokoshneta ! Did you happen to find a solution to this issue? I'm facing the same situation. Thanks!

[kokoshneta]

Nope – I think I kind of forgot about it and just lived with it looking a bit wrong…

[prullmann]

The position() method is forwarded to choices.js, which is used in the background to render the JavaScript version of the Select Field.

Here is the documentation, should someone be interested:

Whether the dropdown should appear above (top) or below (bottom) the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it.

[kokoshneta]

Unfortunately, neither top nor bottom makes any difference to the actual placement – the method doesn’t seem to have any effect at all.