petros
Why do root and app layouts differ slightly after removing Tailwind CSS and adding Simple CSS?
This one has left me rather confused.
I followed How to remove tailwind from Phoenix completely ? (I only want vanilla CSS) - #3 by abar to remove Tailwind CSS from a recent (latest version) Phoenix app I have started building.
I then added Simple CSS via the CDN option to the root.html.heex layout. Here’s the relevant part:
<.live_title suffix="">
<%= assigns[:page_title] || "Our Next Book" %>
</.live_title>
<link phx-track-static rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
When I visit the root of the app, which is handled by a normal HTML page (not a LiveView), the styling looks fine for the header and footer. But then, when I visit any LiveView most of the styling looks fine, except the header and footer:
Normal root page:
A LiveView:
Notice how the header and footer is missing some of the styling. Other than that, the rest of the page using the correct styling.
I haven’t changed anything else in the default configuration as far as I can tell.
What might be the issue?
Marked As Solved
tcoopman
I’d say it depends on their vision, if they want you to build something with their ‘framework’ and expect you to follow the exact structure, it’s not wrong of them.
Similarly it’s not wrong of the liveview team to inject an extra html element (which you can pick whatever you want)
So obviously these 2 are in conflict, but none of them are wrong.
Alright, here’s what I did, and now the header displays consistently across all views. I moved the
headerandfootertags fromapptoroot. This removed thedivbetweenbodyandheader.
but as soon as you have something rendered by liveview that expects the > css relation with body, it might break again.
Honestly, I’d just fork/copy simple.css and change what’s necessary. Easiest change would probably be to give your container an idea:
live_render socket, MyLiveView, container: {:div, id: "my-body"}
And in simple.css do a search replace for body > to: #my-body >
Also Liked
josevalim
Have you compared the generated HTML in the browser for both and used the class inspector to see which classes are being applied?
tcoopman
I updated my previous post with some more information. I noticed your first post too late.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"