-
Add code from file row column finder.bookmarklet as the URL for a bookmark in your browser named Row Column Finder.
-
Go to a page in a site and use the bookmarklet to tag the row and column elements of the page. To remove the tags use the bookmarklet again.
It is quite easy to get into a situation where blocks are not behaving the way you think they should. Some of those issues are a how you think they should work versus how they actually work.
But one issue that is really hard to tell is nested blocks which are virtually undetectable visually.
The following image shows two similar looking page sections. The target layout is a row with three evenly spaced columns of text. Although they appear to be similar visually. They are not structurally.
With the Row Column Finder bookmarklet you begin to have a chance at detecting layout issues that may be making your blocks behave in unexpected ways or are difficult to work with using CSS or JavaScript.
In the first page section we see the target layout as desired. The second page section does not meet our target layout. We have a row with two columns. The first row first column contains a row with two columns. Undesirable nesting!
Wikipedia has a nice entry on bookmarklet.
Please consider making a donation.
-
2022-05-18
- simplify CSS, hopefully better display of tags
- bumped version to v0.1.2
-
2022-05-15
- fix for when site is not in config
- bumped version to v0.1.1
-
2022-05-15
- initial version