Nested <div> between layout and <% @inner_content %>

Phoenix Forum Questions / Help
1

Hello, I’m trying to create my first page on Phoenix-Liveview. But TailWind classes doesn’t worked properly in my LiveView module. I’m trying to stretch <div> from my LiveView module, but LiveView adding nested div, and i don’t understand how to work with this.

<main> with @inner_content in my layout

  <main id="inner_content" class="bg-stone-300 h-full w-full flex flex-col">
    <%= @inner_content %>
  </main>

HTML in my LiveView module

    ~H"""
      <div class="flex-1 bg-lime-500 border-2 rounded-xl p-2">
        123
      </div>
      <div class="flex-1 bg-cinc-500 border-2 rounded-xl p-2">
        123
      </div>
    """

When i replacing @inner_conntent by this html from my LiveView module, all work fine, both divs shrink on all page’s width.

I’ve found “solution” from same question on this forum, but don’t understand it - Styling auto-injected phoenix div between layout and @inner_content?

I’ve tried this


  def my_live_view do
    quote do
      use Phoenix.LiveView,
        layout: {PayLaterWeb.Layouts, :app},
        container: {:tr, class: "colorized h-full w-full flex flex-row bg-black"}

      unquote(html_helpers())
    end
  end
2

Not sure if its related, but as you are new to Liveview its worth noting that core_components.ex has a bunch of components that all have Tailwind classes and can often mess with your layout if you are not aware of them and use the components.

Also you have app.html.heex and root.html.heex which both have <%= @inner_content %> tags, so not sure which one your code is from, but you mave have decided to work in one and not realise the other has divs and classes that effect your layout?

Easiest way to fix it from my experience is to inspect the page, find out which div is being created that you don’t want then search for it in your code editor. Ctrl + Shift + f in VScode is the solution for me whenever Liveview seems to be creating phantom divs/classes.

3

i’m using root.html.heex. My code with <%= @inner_content %> is from root.html.heex.

I didn’t change app.html.heex after creating Phoenix app with phx.new:

<main class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-2xl">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </div>
</main>
<footer class="px-4 sm:px-6 lg:px-8">
  <div class="flex items-center justify-between border-b border-zinc-900 py-3 text-sm">
    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
        @elixirphoenix
      </a>
      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
        GitHub
      </a>
      <a
        href="https://hexdocs.pm/phoenix/overview.html"
        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
      >
        Get Started <span aria-hidden="true">&rarr;</span>
      </a>
    </div>
  </div>
</footer>

I have readed in docs about app.html.heex and root.html.heex layouts, but didn’t understand, why i need app.html.heex in Phoenix 1.7. So i decided not touch app.html.heex.

4

root.html.heex:

<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter: stable;">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title suffix=" · Phoenix Framework">
      <%= assigns[:page_title] || "PayLater" %>
    </.live_title>
    <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>
  </head>
  <body class="flex h-screen antialiased">

      <div class="flex-1 w-64 bg-white divide-y-2 divide-zinc-500">
        <div id="topbar-right" class="relative z-10 flex items-center px-4 sm:px-6 lg:px-8 justify-end">
          <ul class="gap-4 flex">
            <%= if @current_user do %>
              <li>
                <.link
                  href={~p"/administration/users/settings"}
                  class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
                >
                  <%= @current_user.login %>
                </.link>
              </li>
              <li>
                <.link
                  href={~p"/administration/users/log_out"}
                  method="delete"
                  class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
                >
                  Log out
                </.link>
              </li>
            <% end %>
          </ul>
        </div>
        <div>Tut budet path</div>
        <main id="inner_content" class="bg-stone-300 h-full w-full flex flex-col">
          <%= @inner_content %>
        </main>
      </div>

  </body>
</html>

I deleted some code, which was for sidebar. At this code I have used my own and others components from core_components.ex, but the problem in still there.

5

I will try, ty

6

I think when the div is injected like that, the tailwind compiler runs before the div is injected, and doesnt add the css classes to the css file.

Try to add:

container: {:div, class: "my-class"}

and in the app.css:

.my-class {
@apply colorized h-full w-full flex flex-row bg-black;
}

I hope that works, however im not able to check it now myself.

1 Like
7

I believe this is default generated in app.html.heex

<main class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-2xl">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </div>
</main>

If you haven’t changed this code, you will get a load of Tailwind from the flash_group core component that might be effecting your layout, as well as the main and div elements.

Try deleting the default code in app.html.heex and just leaving this to see if it fixes anything:

<%= @inner_content %>
1 Like