loading...

How to make the HTML input fit the containing div

muhdmirzamz profile image MZ ・1 min read

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?

Alt Text

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.

Alt Text

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!

Posted on by:

muhdmirzamz profile

MZ

@muhdmirzamz

Software engineer based in Singapore

Discussion

markdown guide
 

Salamalaikum
Jazakallah khair

 

Waalaikumsalam! Thank you!