On focus border changing component size
https://gyazo.com/90ba846f18909e47d3112f2ff377c829
When I focus on the input, the border is added, but for some reason, the other components change their size accordingly. Is there a way to prevent this from happening?
Here is the code for that particular element. Its parent is a flex container, for context.
Gyazo
Gyazo Screen Video
GitHub
react-experiments/client/src/pages/todolist.js at master · tejveeer...
Learning frontend and backend using Express, React and NodeJS. Will use this to store all the learning projects/experiments. - tejveeer/react-experiments
3 Replies
You yourself have explained the reason for this - you are adding a border. By adding a border you are making the element larger which therefore forces everything else to adjust it's position to make space.
There are several solutions to avoid this happening but the simplest ones are either to give the element a transparent border and then just change it's color on focus or to add an outline rather than a border as the outline does not affect anything else on the page.
Thank you.
if i were you, i would do the transparent border, and not the outline
in fact, i would actually use a gray border instead