Trying to build an autocomplete text input such that as the user types, a dynamic list of items will appear below the input from which they can select the desired record.
We've got this working using a hidden table (the elements we're showing in the list have multiple attributes, so it makes each row "wide") that we show as soon as the user starts typing a keyword. The problem - we'd like this table to a) be positioned directly below the input and b) "float" above other elements - almost like a modal but not actually a modal. Once the user selects and item from the table, it would close the "modal".
In our current implementation, we've got containers to the right of the table so the width of the table is constrained by the left-edge of those containers. And if we manually expand the width of the table, those elements are pushed down on the page. Ideally, it would just float over them when displayed.
Hopefully it's clear what we're trying to achieve.
Thanks.
I ended up getting around this via CSS (setting the width explicitly and the z-index). I don't love this option so if there's a "correct" way to do something like this in Retool, I'd love to hear it.
Thanks.
Hi @tarh33l, thanks for writing in! I'm glad you were able to figure out how to make this work with custom CSS in your application. I just wanted to let you know that using custom CSS to target Retool classes and DOM structure may change as new features are introduced.
I think you may be able to leverage some components from Retool to help you achieve your desired experience. One suggestion would be to try the ListView component to accomplish showing items with multiple attributes. If you need this ListView to float above other elements, you may be able to utilize the Modal component to do so. You may also be able to leverage the Select component in tandem with the Caption property of values to show the extra attributes.
I hope this helps!