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:
FYI: In this case, I know the icon width (24px) and the space between (8px). So setting left to -32pxwould 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.
Goal
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![image](https://user-images.githubusercontent.com/48156230/228528152-4cc5230d-866b-457a-9c1d-92e42d2f2aaa.png)
top
/bottom
/left
/right
won't work. See: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 (withtranslateX
) and set the value-100%
+ spacing needed (8px) usingcalc
. For the vertical centering, I'm usingtop:0; bottom:0
hack combined with center everything usingflex
.Note: the solid black lines are
outline
, which I'm using to show grid lines.