Setup Height Properly for Dropdown/Selection

I am using the selection element in multiple places. I’d expect that, when placed in a container that is “auto” height, when the dropdown is opened, the container would expand to fit it. That doesn’t seem to be the behavior. Anything I can do to make this work for me?

Here’s a video demo:

Can you take a screenshot of your elements navigator?

What are your properties on the wrapper container?

I think you have something that is stopping the expansion. Like a height that is manually set with a pixel value. The select drop down should just expand over all of that or expand upwards if it cannot.

Here’s a video of the issue I’m talking about:

Thanks so much for your help!

Any thoughts? I haven’t found a solution to this issue yet

Hi @kyanaloe :wave:

By default, the multi-select element should display in full over the container without being cut out.

I recorded a short video to demonstrate this if you’re interested :slight_smile:

Any chance you added a fixed height or modified the default settings of the parent container?

You might want to check if the Overflow property is Unset for example:

Hi @Joyce! Thank you for taking the time to work on this with me.

I went to record another loom to demonstrate that I was trying to use the settings on the container, as you mentioned, and during the recording, discovered what the glitch is!

When the container has a corner radius of 10px, like mine, the dropdown is cut off. If the corner radius is set to 0px, the behavior is as you are showing in your video.

Here’s my loom in which I noticed the issue: Loom | Free Screen & Video Recording Software

1 Like

Interesting! Will report back to the tech team :slight_smile:


Ok so the tech team will look into it further but it’s not that easy to change that behavior on our side.

In the meantime, you can remove the corner-radius and add border-radius: 10px; in custom CSS on the container.

That’s a super easy adjustment and it solves a big problem for me. Thanks!

1 Like