How to Apply CSS to Live View Session Wrapper?

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

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

3 Likes

I missed that completely. Thanks!

1 Like

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