More from Henry Kim

RSS

Render without layout for Turbo Frame requests

11600 views

0 comments

                  class ApplicationController < ActionController::Base
  layout -> { turbo_frame_request? ? false : 'application' }
end

                  <%= turbo_frame_tag dom_id(@project) do %>
  <%= render 'form', project: @project %>
<% end %>

A classic Turbo foot-gun is returning a full layout inside a frame, which results in nested <html> and weird styling. The simplest fix is layout -> { turbo_frame_request? ? false : 'application' } at the controller level. I use this when I have frame-only endpoints (modal content, inline edit forms). It also reduces bytes transferred and speeds up frame navigation. For some pages, I prefer explicit layouts per action, but the dynamic layout approach is a good default for Hotwire-heavy UIs. The other side of this is ensuring every frame response actually includes a matching turbo_frame_tag wrapper; otherwise Turbo will do a full visit.

Henry Kim

More from Henry Kim

Render without layout for Turbo Frame requests

0 Comments

More from Henry Kim