Wrapping a div table structure in turbo_frame_tag breaks the table flow

1

You can’t wrap any parts of a table (tr, tbody, etc) in a turbo_frame_tag because it’s not valid html and won’t work. To get around this, I rebuilt a simple table using divs and some Bootstrap 5 utility classes (d-table, d-table-row, d-table-cell, etc). The div table renders perfectly until I wrap it in a turbo_frame_tag…then, the div table flow breaks and everything piles up to the left side.

I was surprised to see a turbo_frame_tag disrupt a div table like this…almost in the same manner it breaks a real table (minus the disruption to tag structure).

Why does the turbo_frame_tag mess up a simulated table structure made of styled divs? Is there a way to tackle this?

Thanks!

2

Turns out it’s not the turbo_frame_tag. Any element (span, div, etc) that is placed within the table structure (even though the table is constructed of divs), if not a styled part of the table structure, seems to break the flow of the div table.

3

You might not need the turbo frame - you can now target any id or class matches via turbo streams.

4

@defsdoor But would this also work with an edit button (GET request)? As far as I understand turbo_stream doesn’t work with GET requests anymore? I want to replace the table row with a form when the user clicks EDIT button.