Hidden phx-classes messing with CSS?

Have a look at how the binding works.

In short they are just there for convenience so that you can respond to different life cycle states in the UI.

IE: phx-connected may apply a hidden class to some loader spinner, while phx-loading shows it initially. At the end of the day though I don’t think anyone is trying to tell you how to use them, so there’s not a lot of already existing styles for each life cycle state. That parts up to you.

Loading states and errors

All phx- event bindings apply their own css classes when pushed. For example the following markup:

<button phx-click="clicked" phx-window-keydown="key">...</button>

On click, would receive the phx-click-loading class, and on keydown would receive the
phx-keydown-loading class. The css loading classes are maintained until an acknowledgement is received on > the client for the pushed event.

I’ve seen the JS file in my app so I figured they add classes for multiple things, what I don’t get is the standard way to manage this as you can quite easily do what I’ve done and spend I day working on something then find out its impossible to complete without restructuring everything.

Some of the other things I’ve had to deal with could only be done due to setting position which I didn’t really want to do.

My issue btw was being caused by this:

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

I figured I could create a general container for all my live views like the above
The issue was that the inspect order was this

• Container - 100%
• Phx-Connected - No value
• Rest of my code - 100% of nothing is nothing

This meant that the containers 100% width just disappears at the phx-connected stage

I’ve now just wrapped all my liveviews with container to change the order to

• Phx-Connected - No value
• Container - 100%
• Rest of my code - 100%

It’s messed a bunch of things up but at least it will hopefully work going forwards.

I figured I could create a general container for all my live views like the above
The issue was that the inspect order was this

The LV container has a way of adding classes to it directly.

have a look at how LV is defined in your MyAppWeb.ex file.

def live_view do
    quote do
      use Phoenix.LiveView,
        container: {:div, class: "h-full"},
        layout: {MyAppWeb.Layouts, :app}

      unquote(html_helpers())
    end
  end

Is this what you mean?

I mean because I had @inner_content wrapped in my “container” it was applying the phx-connected class to the @inner_content after I set the containers dimensions. As phx-connected doesn’t seem to have height/width set to anything and is just display block it was messing with all the divs that were visibly children of the “container” to me.

Moving the “container” within the @inner_content fix it because phx-connected becomes the parent of “container” instead of the first child.

Basically @inner_content seems to apply a class of “phx-connected” which only has a “display: block” property meaning you lose all values outside of it in terms of height/width