Skip to content

Improve Element Highlighting #53

@leonvogt

Description

@leonvogt

Currently, we have two methods to highlight Turbo Frames:

  1. Direct Outline:
    • Add an outline directly to the frame.
    • Set the display property to block.

This approach is more reliable and is the default behavior of this extension.
However, setting the display property to block can break the layout of the page.

  1. Additional div Element:
    • Add a div element with the same dimensions as the frame.
    • Set the position to absolute and add the outline to the div.

This approach is less intrusive to the page layout but can be less reliable. If the frame changes size and we don’t detect it, the outline will be incorrect. It also impacts performance as it requires adding multiple additional elements to the page.


Highlighting Stimulus controllers presents a similar issue. When we add an outline to the controller element, we assume the element and a potential outline is visible. However, if the element has for example display: contents, the outline won’t be visible.


I currently don't have a good solution for this, but I hope we can come up with a more reliable method in the future for highlighting elements.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions