Hidden phx-classes messing with CSS?

Phoenix Forum Questions / Help
,
1

Why are classes like “phx-connected” applied behind the scenes with no references to the CSS properties they have?

Is there a list anywhere that details all the random classes that can be added behind the scenes and under which circumstances? It would be nice to know in advance before wasting time. Just spent about 10 minutes try to figure out why I couldn’t set a width to 100%, only to find out it was being restriced by “phx-connected” which has no CSS properties that I can find.

If I create the phx-connected class and change the width to 100% I can fix my current problem, but what happens later when phx-connected gets added to an object whose width or other properties I don’t want to be the same?

Is phx-connected applied to every socket connection, and if so should I be treating it as my entire pages container to be safe? I also had a phx-class messing with my spacing on a text-area yesterday.

Any info on how I’m meant to deal with this is appreciated.

Edit:

I forgot to add, if they are adding hidden classes, why not set the heights and widths to something like inherit? At least then if someone isn’t aware it exists, it will take the properties of its parent.

1 Like
2

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.

https://hexdocs.pm/phoenix_live_view/bindings.html#loading-states-and-errors

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.

3

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.

4

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?

5

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