Editing wrapper element around <main> in LiveView

Phoenix Forum Questions / Help
1

Hi guys,

LiveView app layout consist of root.html.heex and a app.html.heex files.

root.html.heex

<body class="">
    <%= @inner_content %>
  </body>

app.html.heex

<header>
...content
</header>
<main>
...content
</main>

So, inside root.html.heex files there are base HTML elements and inside body, using @inner content, elements from app.html.heex are loaded. All good so far but LiveView creates a wrapper div element around header and main inside app.html.heex so we get the following:

<body class="">
    <div>  <- WRAPPER ELEMENT
      <header>
      <main>
   </div>
  </body>

For styling purposes I would like to add some classes to this wrapper div, but how do I edit it?

2 Likes
2

You can use:

body > div {
  /* ... */
}
3

I was wondering if there is some direct way to edit it but if not, I’ll go with this, thanks.

4

None that I can think of. I would actually use:

div[data-phx-main] {
  /* ... */
}

now that I’m looking at it in my project. This way your dead views won’t be potentially affected.

Also if you’re using Tailwind you can just use @apply to use Tailwind classes inside regular CSS rules:

div[data-phx-main] {
  @apply text-green-400;
}
1 Like
5

You also can change your LiveView container from your my_app_web.ex file:

use Phoenix.LiveView, container: {:div, class: "foo-bar"}

https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#live_render/3-containers

4 Likes
6

Oh nice! Was not aware of this. The only disadvantage here is that you end up with CSS in a hard-to-find place. Could lead to a gotcha for those not in the know.

1 Like