How to Apply CSS to Live View Session Wrapper?

Phoenix Forum Questions / Help
,
1

I have a layout that I use for both Live View templates and non-Live View templates. I noticed that the Live View Template wraps the entire thing in a session div. This is messing up the CSS on the page. I am using TailWind CSS. How can I apply CSS directly to that div?

<!DOCTYPE html>
<html lang="en">
  <head>
    <%= csrf_meta_tag() %>
    <%= render FlagShipWeb.Shared.LayoutView, "_head.html" %>

    <link rel="stylesheet" href="<%= Routes.static_url(@conn, "/css/app.css") %>">
    <script src="<%= Routes.static_url(@conn, "/js/app.js") %>"></script>
  </head>

  <body class="bg-gray-100 leading-normal font-sans mt-12">
    <%= render FlagShipWeb.App.LayoutView, "_nav.html", assigns %>
    <%= render FlagShipWeb.Shared.LayoutView, "_flashes.html", assigns %>

    <main class="flex flex-col items-center pb-8 md:pb-5">
      <%= render FlagShipWeb.App.LayoutView, "_title.html", title: "@view_module.title(@conn)" %>

      <div class="flex flex-col items-center w-full md:mt-4 lg:max-w-5xl lg:mt-8">
        <%= @inner_content %>
      </div>
    </main>

    <%= render FlagShipWeb.Shared.LayoutView, "_analytics.html", assigns %>
  </body>
</html>

I have @inner_content wrapped in a div that I want applied to all templates but since Live View wraps the content in another div it messes it up. Thanks

2

You can customize the container that LiveView wraps with. See docs here: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#using/1

4 Likes
3

I missed that completely. Thanks!

1 Like
4

Another option is to override container option while live_render function.
see docs