I've been trying to stylize a search bar (text field component) to display a dropdown with search results that is layered above the other components on the screen so that none of the search results are obscured.
Is there a way to render Perspective components in different layers so that some components can overlap others? I tried using using z-index CSS styles, but I haven't had any luck.
You can. In some cases the style on a component can clip content within the component that goes out of bounds. You can use the "overflow" property to control how this behaves.
You can always adjust z order an visibility of various individual components which it sounds like you are already doing.
You can use pseudoelements with position:absolute to add content in layers that lives within the styled component. As far as I know this can only be done with advanced style sheet (certainly the only way I've done it).
Any details you can provide that give a clearer picture of your setup would make it easier for people on the forums to help you.
Thank you!
My setup is that I have a view that has a root column container. The first element in the container is a Text Field component that I want to act as a search bar. The second component in the container is an array of buttons. When the user enters text into the search bar, it will render search results using a flex repeater that expands beneath the search bar to show all matching search results. Stylistically, I am looking for a solution that would allow the flex repeater to render in a layer on top of the array of buttons if the flex repeater grows to intersect the array of buttons.
I think I understand. You can kind of kludge it with absolute positioning and overflow visible.
I'm assuming your flex repeater is set to column.
You can set these CSS properties to possibly get a look like what you have in mind (not sure).
Basically, this is taking the flex repeater out of the normal render spot and offsetting it by -50. You have to add a background style if you want it to have a background (or simply have a background on your template).
If that looks like it's doing what you want make sure to test it on all devices you plan to run your screen on. Absolute positioning can screw up layout.
Edit:
I forgot to mention I added the properties in this screenshot to a flex repeater in a screen that was a column container to offset the X position to overlap the earlier row in the column container. Anyway, the properties in the screenshot go on your flex repeater.
