In Positionable, how do I select element to resize or move?

[ejd1962]

Hello Andrew,

Very cool tool... I think it is just what I need.... but I cannot figure out how to select the elements.
I read I am supposed to use shift-leftmouseclick but that did not work. leftmouseclick also fails. rightmouseclick fails.

Not sure what I am doing wrong. Perhaps you can put a page up somewhere where it is supposed to work, and provide a few hints about how to select elements to move or resize.

Thanks so much,

Eric Dormer

[ejd1962]

Ok... turns out mouseclick does work. But only on some pages. From what I can see, it works well on top level elements, but apparently not on lower level nested elements, such as buttons nested inside a < div >.
Oddly, it does properly report the id of the lower level nested element, but attempts to resize the lower level button fail. The resizing or moving is applied to the wrapper element.

[andrewplummer]

Can you post links please? Things like complex DOM structures or lots of event listeners can can issues for Positionable as can be expected.

As for selected elements, it's listed on the main extension page.
You can click to select, shift click to add, or drag to create a bounding box. From there you can select via the control panel on the boxes you see that represent the currently selected elements.

This is useful when elements are nested or too small to select with just a click.

[olejorgenb]

Take this github page itself for instance? The only elements I manage to select, move etc. is the avatars and the "attach files" footer in the comment editor.

This extension looks like exactly what I wanted. Also looks very polished. Great work!

But I can't select stuff :) It's for sure not an easy problem to make a good UI for, but for me it would actually be very useful to simply have a mode which always operated on the selected element in the development tools (not sure if that's technically feasible though)

Or if possible: click once to select the most specific element, click again to select the parent, etc. + and undo button.

[olejorgenb]

Ah, I see, you have to select the set of elements to operate on using the css selector in the settings. (and there's some sort of default on images?)

EDIT: It's right in the description on the chrome store page 🤦

By default, it works on absolute and fixed positioned elements, however you can set a CSS selector to target exactly the elements you're interested in. Static elements will be forced to position "relative"

That's a good idea, but the extension would still benefit from having a mode similar to what I outlined in the previous comment.