Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Element Highlighting #53

Open
leonvogt opened this issue Jun 15, 2024 · 0 comments
Open

Improve Element Highlighting #53

leonvogt opened this issue Jun 15, 2024 · 0 comments
Labels
enhancement New feature or request Stimulus Turbo

Comments

@leonvogt
Copy link
Owner

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.

@leonvogt leonvogt added enhancement New feature or request Stimulus Turbo labels Jun 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Stimulus Turbo
Projects
None yet
Development

No branches or pull requests

1 participant