CODEWITHSUNDEEP
javascripthtmlcss
reactor
reactor

Reputation: 1941

How to size the width of input field to its max length in html?

I'd like to create a form with an address and apt # field and have the apt # field be sized to its max length of 8 while having the other field take up whatever width is left for this row. I was wondering how I can do this without manually setting the width.

I have something like this:

<style>
.container {
  display: flex;
}
</style>

<div class="container">
  <input placeholder="Address"/>
  <input name="apt" placeholder="Apt #" maxlength=8 />
</div>

thanks!

Upvotes: 0

Views: 2283

Answers (1)

anon
anon

Reputation: 816

Use flex-grow:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

You can't actually make the apartment input its maxlength as this is referring to the maximum length of characters that input can contain not actually the length of the element itself. But I have made an estimate of the number of characters / 2 in rems to be a good width for the element.

<style>
.container {
  display: flex;
}

.address{
  flex-grow: 1;
}

.apt{
  width: 4rem;
}
</style>

<div class="container">
  <input class="address" placeholder="Address"/>
  <input class="apt" name="apt" placeholder="Apt #" maxlength=8 />
</div>

Upvotes: 1

Related Questions