# Setup Height Properly for Dropdown/Selection

**URL:** <https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455>\
**Category:** Ask us anything\
**Created:** [April 22, 2022, 1:34pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455 "2022-04-22T13:34:16Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [April 22, 2022, 1:34pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/1 "2022-04-22T13:34:16Z")

</div>

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:

---

<div class="post-metadata">

**Author:** ![kevinwasie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kevinwasie/32/402_2.png) [@kevinwasie](https://community.weweb.io/u/kevinwasie)\
**Post date:** [April 22, 2022, 3:22pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/2 "2022-04-22T15:22:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [May 13, 2022, 1:44pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/3 "2022-05-13T13:44:19Z")

</div>

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

Thanks so much for your help!

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [May 19, 2022, 7:02pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/4 "2022-05-19T19:02:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [May 20, 2022, 9:19am UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/5 "2022-05-20T09:19:30Z")

</div>

Hi @kyanaloe 👋

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

I recorded a [short video](https://www.loom.com/share/f5e28c1e1332495dbf31d83d0e486706) to demonstrate this if you’re interested 🙂

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:

 ![overflow on container](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/9b32e0d1bb62b77fb126d2619b3bb41255fdacd3.jpeg)

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [May 20, 2022, 11:05am UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/6 "2022-05-20T11:05:59Z")

</div>

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](https://www.loom.com/share/e658c88cf94547d79e66f0cd7d24a22e)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [May 20, 2022, 12:26pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/7 "2022-05-20T12:26:40Z")

</div>

Interesting! Will report back to the tech team 🙂

Thanks!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [May 20, 2022, 3:36pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/8 "2022-05-20T15:36:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [May 20, 2022, 11:21pm UTC](https://community.weweb.io/t/setup-height-properly-for-dropdown-selection/455/9 "2022-05-20T23:21:17Z")

</div>

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