Hey all I created a basic “Contact Us” component in custom html/css offline in VS Code.
It’s basic HTML/CSS with some Alpine JS to trigger the modal.
When I run this page in VS Code with Live Server everything looks as it should
But when I place the same files into Anvil the modal is not centered.
Initially I removed all the Alpine JS but I was still getting the same issue.
Everything works fine and looks fine except for the modal.
Here’s a link to the app! Thanks in advance!
https://anvil.works/build#clone:42IY3TVUJE4TOTNE=NUBSUOQDUVUGXYUSMUUWHSV6
The issue is that bootstrap css is interfering with your custom css.
Anvil ships with bootstrap: Anvil Docs | Using JavaScript
And bootstrap has css styling for a .modal class.
I found the main style that was overridden was the position property
using:
.modal-container .modal {
position: static;
fixed the obvious issue.
But there may be other, more subtle, conflicts in the css styling.
Side note, you are fetching js libraries in both your Native Libraries and your custom HTML.
You should probably just do this in Native Libraries.
In the custom HTML you don’t need the <head> or <body> tags.
The custom HTML is injected into the page within the existing <body> tag.
(Native Libraries code is injected into the existing <head> tag)
1 Like
Wow that did it!
And yeah I’m aware of the head/body issues I was honestly just trying anything to get this thing to work!
How do I get rid of all the other bootstrap styles?
1 Like
Currently there’s no obvious way to remove bootstrap css stylings, not least because removing it will inadvertently affect the look of native anvil components and the basic look of the page.
That said, if you ask this question again in the future the answer might be quite different.
I encountered the same issue. I used a custom html, removed all standard html/css from assets, loaded pico css (https://picocss.com/) in Native and added html.
When the page was viewed from anvil, it looked different from when I served it as a html file to a browser.
It is at least good to know that I no longer need to spend time hunting for errors, but that this is a feature. Even custom html forms retain some css.
A follow up question might be: Would it be possible to override existing css with an imported css?
I know we could use roles and revise css on a case-by-case basis, but perhaps the last imported stylesheet could override anvil’s when there is a conflict? Or perhaps it is impossible?
1 Like
