Tailwind Grid + LiveView bug?

Phoenix Forum Questions / Help
,
1

I have a regular view with a Tailwind grid defined as

<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
... code omitted
</div>

and it works fine:

Small:
|-------col 1--------|
|-------col 2--------|
|-------col 3--------|

Medium:
|-------col 1--------||-------col 2--------|
|-------col 3--------|

Large:

|-------col 1--------||-------col 2--------||-------col 3--------|

However, when I paste the exact same code into a liveview, I get this:

Small:
|-------col 1--------|
|-------col 2--------|
|-------col 3--------|

Medium:
|-------col 1--------|                    |-------col 2--------|
                            
                     |-------col 3--------|

Large:

|-------col 1--------|                    |-------col 2--------|
                            
                     |-------col 3--------|

Any idea what might be happening?

2

Take a look at the source code (not devtools) and compare their output. If their the same then try to see if morphdom does somehow mess things up on applying dom updates.

3

Will do, thanks. I can’t get to it until tomorrow, but I’ll post back what I find.

I realize now that in LiveView, each column has the proper content width, but it is adding an extra column (with no content) between two cells.

4

My bad. LiveView is fine.

I had an extra <br/> that broke it.

1 Like
5

My apologies to the community for posting before checking it more carefully. With the word “bug,” it got 156 views, Which means I wasted, at a minimum. 156 minutes of community time. Won’t happen again.