Hey there!
I wanted to challenge myself to write a technical post again so here I am. I've recently gotten to writing up a todo app in React and came across this issue. It's simple to solve but I thought, why not do up a blog post on it?
This is my code.
<div id='main-div'>
<div id="inner-div">
<input id="text-input" type="text" value={this.state.obj.text} placeholder="Enter todo item" onChange={this.handleChange} />
<div>
</div>
This is my code structure, simplified.
However, when you run this, you get this.
I have sort of colour-coded the different divs. Red indicates the main div while blue indicates the inner div.
Notice how the input
is overflowing out of the inner div?
So, apparently this is a thing in CSS or HTML. I searched it up and found this answer.
From the answer, I understand that there is a bounding border box on the input
tag. If you use the box-sizing: border-box;
style with the input
tag, this actually places the bounding box inside the tag.
The input
tag appears bigger because the bounding box appears outside of it, initially.
It's an interesting property to have.
Well, this has been short but sweet. Hope anyone who comes across this post learned something or have fixed their issue.
Thanks for reading!
Top comments (2)
Salamalaikum
Jazakallah khair
Waalaikumsalam! Thank you!