-
I want to have an overlay anchored to a container, but i want it to align with the bottom of the container when visible. I’ve got the overlay working but the bottom of the popup aligns with the middle of the container. I have the overlay set to bottom center however it still aligns with the middle of the container. Can I have it so that it shows over the entire container that I’ve set as a link (the orange one in the below image)?
-
Hi there,
The Bottom Center placement for anchored Overlay Panels works like a popover position. It means the overlay is placed below the trigger, centered horizontally. It doesn’t align the overlay’s bottom edge with the container, and it won’t automatically cover the whole orange container.
If you want the overlay to position relative to that orange container, add a custom class to the container, then use that class in the overlay’s Position to Parent field.
That will make the container the positioning reference. However, if you want the overlay to fully cover the orange section, that would need custom CSS/JS or a different setup where the reveal content is positioned inside the container itself.
-
Thanks Alvind,
I’ve got a container just below the trigger container, which has a custom css class. I’ve kept this container in blue for the purposes in testing (it appears like a bottom border). https://tinyurl.com/y65yauzsI’ve added the css class to the overlay settings. https://tinyurl.com/2twyza53
The overlay is triggered from the orange panel (https://tinyurl.com/4euwyn9f) but I was hoping it would bottom align with the currently blue strip. Is this possible or am I misunderstanding?
Many thanks,
Abby -
Added temporary login details to the private area below.
-
That Position to Parent setting can only target the trigger itself or one of its parent/ancestor Containers.
In your current setup, the blue strip is a separate Container below the orange trigger panel, so the overlay cannot position itself relative to that blue strip.
If you move the class to the orange trigger Container itself, or to a wrapper Container that contains the trigger, the setting should take effect. However, anchored overlays still behave like popovers, meaning they position outside the reference element rather than covering or bottom-aligning inside that section.
For the exact effect you’re trying to achieve, where the overlay covers the orange panel and aligns with the lower strip, this would require a custom CSS/JS approach, or the reveal content would need to be positioned inside the orange Container itself.
-
Fair enough. I’ve moved the trigger to the right hand orange box and have the overlay as bottom center, however it still opens at the very top of the screen – it seems to align like that whether I choose Top Center or Bottom Center.
I’d just like a bulk of the writing to be visible rather than just the bottom edge showing and the user having to scroll up to see the content. Is there any way to do this with the Anchored Overlay? I’m happy to use custom css if you’re able to get me started on this?
-
Sure, but before going with that solution, would using a standard overlay be an option for you?
In my opinion, that would be the better approach since it is responsive by default and does not require additional adjustments across different breakpoints.
- You must be logged in to reply to this topic.