I saw many people with a similar problem on the forum but never found a proper solution. I need XY panels at multiple places inside my website. And since XY panel is the only component allowing overlaying, there’s no alternative for me.
Here is a screenshot from the Anvil designer. As you can see, the text in both XY panel and linear panel are aligned at the center.
However, when I run it, this is what happens:
The Linear Panel has aligned in the center perfectly but XY panel hasn’t.
Even on mobile, the Linear Panel displays perfectly but XY panel doesn’t.
Is there any way to fix this? Maybe by setting some CSS position to it?
If you want everything centered in your xy panel and the width is dynamic, you can add the following to your theme.css
Add the role and put the role on the XY panel itself.
.anvil-role-centerXY > div > .anvil-component {
left: 50% !important;
transform: translate(-50%, 0);
}
If you only want some of the components in the XYPanel to be centered - you can add this role to any of the nested components
.anvil-role-center {
left: 50% !important;
transform: translate(-50%, 0);
}
On the internet your search term would be something like -
how to center align an absolute positioned element
2 Likes
So that’s another problem you solved. I don’t know how I can repay you for all your help
can you please clarify what does “add the role” means?
Thanks.
Maybe this can help Anvil Docs | Roles.
