MultiSelect Overlapping Other Fields Issue

App Building
1

I’m using a MultiSelect and when the user selects enough values that it fills up more than one row of the select box, the MultiSelect expands, and overlaps the other form fields below it, making them unreadable.

Is it possible to prevent this and have the other fields get bumped down automatically?

1 Like
2

Hey there @vancea47 , sorry about this issue! We have it on our list to fix, but it takes a bit of refactoring of the component layout. In the meantime you can use this CSS on the affected page to get a nice overflow scroll for the component, just replace multiselect1 with the name of your component:

<style>
  
  ._retool-multiselect1 .input-control-component__input {
    height: 100%;
    overflow: scroll;
  }
  
  ._retool-multiselect1 .input-control-component__input .flex {
    height: 100%
  }
</style>

Here's a GIF of the overflow scroll working:

Shared with Zight

3 Likes