Turbo-Frame is not displaying CSS styles

1

I’ve got a “grid” of data where I want each row in that grid to be a turbo-frame (so I can use inline editing and so on).

(Video of the problem in action here: Loom | Free Screen & Video Recording Software)

I’ve applied some CSS to the individual rows - adding a top/bottom border and alternate rows get a background color.

If I inspect the generated page, it all looks correct - but none of the CSS applies to the turbo-frames. The inspector shows it, but there are no borders and no background colours. If I use the inspector to change the elements from turbo-frames to divs then the CSS magically appears.

Is this an issue with custom elements in general? Or something weird with turbo-frames? And how do I get around it?

2

Are you using a table element in your HTML to generate that grid, or is it a stack of divs? The former will not (ever) work, because you can only add TR elements to a table or tbody. Custom turbo-frame elements won’t go into the right place. If you are already using a table-shaped stack of DIVs, then your problem is likely elsewhere. Can you post a Gist of your actual code, rather than a video of the failure?

Walter

3

It’s a stack of divs.

<div id="documents" class="grid">
  <%= render partial: 'documents/document', collection: documents %>
</div>

And the partial is:

<%= turbo_frame_tag dom_id(document), class: "grid__container-row" do %>
  <%# some stuff %>
<% end %>

Finally the CSS is something like

  .grid__container-row {
    border-top: 1px solid var(--bs-secondary-lighter);
    padding: 0.5rem;
    &:first-child {
      margin-top: 0;
      border-top: 0;
    }
   &:nth-of-type(even) {
      background-color: var( --bs-secondary-lightest);
    }
    &:hover {
      background-color: var( --bs-secondary-lighter);
    }
  }

If I change the partial to below (or I edit the HTML in the web inspector) then everything works fine - so it’s the turbo-frame tag that’s causing the issue.

<div id="<%= dom_id(document) %>" class="grid__container-row">
  <%# some stuff %>
</div>
4

I’m not sure how the turbo-frame tag is being rendered to html in your case. Are you seeing the custom tag in your browser, or is there a template tag inside that with some actual html? I’ve never tried to add class attributes to a frame before, only to the real html elements inside one.

Walter

5

It comes through as:

<turbo-frame id="this" class="that">

And if I edit that turbo-frame tag in the web inspector and change it to a div then everything works as expected.

For now I’m using Rails’ cycle method on an internal div but it’s less than ideal; if a turbo-stream update occurs, it doesn’t know whether it’s an odd/even row (and it could even be different for different users) whereas the CSS &:nth-of-type will apply the correct styles as its inserted into the container.

6

Then I would suspect that the visibility of the class style you are adding depends in some way on the target being a div. That answer has several dimensions: a turbo-frame may not have defined display the same way as a div, or the class may be literally defined in the css as div.that, or any number of other cascading reasons (the C in CSS). I’d start by inspecting the object in the browser’s developer tools, and see what sense the DOM has made of it.

Walter