In CSS3 resize, the icon to resize is positioned in the bottom right. How do I make it appear in the top left and make the user able to resize accordingly?
I've found here:
The precise direction of resizing (i.e. altering the top left of the element or altering the bottom right) may depend on a number of factors including whether the element is absolutely positioned, whether it is positioned using the ‘right’ and ‘bottom’ properties, whether the language of the element is right-to-left etc. The precise direction of resizing is left to the UA to properly determine for the platform.
So far, managed to place the icon in the bottom left using:
.fixed {
position: fixed;
bottom: 0;
right: 0;
resize: both;
overflow: auto;
direction: rtl;
}
You can't, it is handled by the User Agent (but you can try rotating it :)
Honestly, I agree with the one commenting that the whole resize property thing should have been left out of the standards:
This shouldn’t be in the standard. Resizable textboxes are a user agent feature to help mitigate poor design, and giving developers the option to it is madness. If I as a user want to resize a textbox to help me enter text, then that should be up to me. The developer has no idea about the screen resolution, DPI, and physical dimensions of my device, or any special accessibility overrides or user stylesheets I have applied, and therefore no way to say I don’t need to resize something.
Amen :/