search

sanjar-notes / web_dev_fundamentals

The basics - HTML, CSS, Javascript and more
https://sanjar-notes.github.io/web_dev_fundamentals/
3 stars 0 forks source link

Outside padding (yes, not margin) using `transform` 100% #73

Open sanjarcode opened 1 year ago

sanjarcode commented 1 year ago

Goal

image

Situation

Suppose we are constrained, in that we don't have access to outside markup. To add this icon on the left (space is guaranteed), with a space ("outside padding"), I first make the icon position: absolute and constrain it within the input box (position: relative). This is easy.

For the "outside padding", a negative top/bottom/left/right won't work. See: image

FYI: In this case, I know the icon width (24px) and the space between (8px). So setting left to -32px would solve the issue. But this solution wouldn't work if the icon (any element) width was unknown/dynamic.

Learning

Use the transform property (with translateX) and set the value -100% + spacing needed (8px) using calc. For the vertical centering, I'm using top:0; bottom:0 hack combined with center everything using flex.

Note: the solid black lines are outline, which I'm using to show grid lines.

sanjarcode commented 1 year ago

This is the first situation where I'm having to use transform for a static UI.