GazeIntoTheAbyss

Hidden phx-classes messing with CSS?

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.

4 comments

/phoenix #liveview

1 943 4

2023-04-07 16:43:28 UTC

Marked As Solved

GazeIntoTheAbyss

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.

Post #2

Last Post!

GazeIntoTheAbyss

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

Post #4