How to get same width for input type text and input type date

Question

I have two <input> elements -- one is type text the other is type date. When they are on a line by themselves, they both grow to the same width. However, if I move them both inside a div with display:flex, suddenly the <input type="date" /> becomes smaller than the other.

How can I ensure that the both element widths get calculated the same when they are free to grow (i.e. no hard-coded width)?

* {
  box-sizing: border-box;
  -webkit-box-sizing : border-box;
  -moz-box-sizing: border-box;
}
body{
  display:flex;
  flex-grow:1;
  flex-direction: column;
  height: 95vh;
}

.form{
  display:flex;
  flex-direction: column;
  width: 600px;
}
.input-row{
  display:flex;
}
.input-group{
  display:flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 10px;
}
input {
  display: inline-block;
}
input, select {
  padding: .4em;
}

input[type="date"]{
  padding: .3em;
}

.comment{
  font-size: .8em;
  margin: 15px 0px;
  color: blue;
}

<div class="form">
<span class="comment">Notice how both text and date expand to the same width when they're alone on the line.</span>
  <div class="input-group">
    <label>Text</label>
    <input type = "text" />
  </div>
  
  <div class="input-group">
    <label>Date</label>
    <input type="date" />
  </div>
  
  <span class="comment">Notice how Date is smaller than Text when combined on a single line</span>
  <div class="input-row">
    <div class="input-group">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group">
      <label>Date</label>
      <input type="date" />
    </div>
  </div>


  <div class="input-row">
    <div class="input-group">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group">
      <label>Text2</label>
      <input type="text" />
    </div>
  </div>
</div>

@TemaniAfif I finally got around to trying what you suggested -- brilliant! If you want to add this as an answer, I'll go ahead and accept it. — RHarris, Apr 06 '20 at 20:12
I will close as duplicate since the answer was already provided — Temani Afif, Apr 06 '20 at 20:13

score 0 · Answer 1 · answered Apr 03 '20 at 19:38

Here is your Requirement | for better performance use Bootstrap framework and w3schools.com

* {
  box-sizing: border-box;
  -webkit-box-sizing : border-box;
  -moz-box-sizing: border-box;
}
body{
  display:flex;
  flex-grow:1;
  flex-direction: column;
  height: 95vh;
}

.form{
  display:flex;
  flex-direction: column;
  width: 600px;
}
.input-row{
  display:flex;
}
.input-group{
  display:flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 10px;
}
input {
  display: inline-block;
}
input, select {
  padding: .3em;
  width:50vw;
  height: 8vh;
  
}

input[type="date"]{
  padding: .3em;
  width:50vw;
  height: 8vh;
  
}

.comment{
  font-size: .8em;
  margin: 15px 0px;
  color: blue;
}

<div class="form">
<span class="comment">Notice how both text and date expand to the same width when they're alone on the line.</span>
  <div class="input-group">
    <label>Text</label>
    <input type = "text" />
  </div>
  
  <div class="input-group">
    <label>Date</label>
    <input type="date" />
  </div>
  
  <span class="comment">Notice how Date is smaller than Text when combined on a single line</span>
  <div class="input-row">
    <div class="input-group">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group">
      <label>Date</label>
      <input type="date" />
    </div>
  </div>


  <div class="input-row">
    <div class="input-group">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group">
      <label>Text2</label>
      <input type="text" />
    </div>
  </div>
</div>

I request you not to use single class name too many times for the CSS declarations. like "input"

The problem with this solution is that you're "hard-coding" the width. IOW, if I were to add an extra textbox into the input-row with the existing two, your solution fails. I'm looking for something that is flexible whereby I can place any number of textboxes together and they will all size accordingly. — RHarris, Apr 03 '20 at 19:59
FYI, this was just demo code so I wasn't particularly worried about how clean it was. — RHarris, Apr 03 '20 at 19:59
I have solved for your demo code only. for the real project use bootstrap framework, or you can media queries to solve your problem without using any external framework. — Sandeep Dalal, Apr 04 '20 at 11:57

Saadi Toumi Fouad · Answer 2 · 2020-04-03T23:30:39.107

You don't need to hard code anything, you need to control the width of their containers, just add this to your code

.input-group {
  width: 50%;
}

but that will make them all 50% large, if you like that then fine, but if you want them to take whole space when only one per row and the same width when there are two of them then create a class like this

.whalf {
  width: 50%;
}

and add it only to the required containers that way you can add as much as you want and the behaviour stays the same

* {
  box-sizing: border-box;
  -webkit-box-sizing : border-box;
  -moz-box-sizing: border-box;
}
body{
  display:flex;
  flex-grow:1;
  flex-direction: column;
  height: 95vh;
}

.form{
  display:flex;
  flex-direction: column;
  width: 600px;
}
.input-row{
  display:flex;
}
.input-group{
  display:flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 10px;
}
input {
  display: inline-block;
}
input, select {
  padding: .4em;
}

input[type="date"]{
  padding: .3em;
}

.comment{
  font-size: .8em;
  margin: 15px 0px;
  color: blue;
}

.whalf {
  width: 50%;
}

<div class="form">
<span class="comment">Notice how both text and date expand to the same width when they're alone on the line.</span>
  <div class="input-group">
    <label>Text</label>
    <input type = "text" />
  </div>
  
  <div class="input-group">
    <label>Date</label>
    <input type="date" />
  </div>
  
  <span class="comment">Notice how Date is smaller than Text when combined on a single line</span>
  <div class="input-row">
    <div class="input-group whalf">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group whalf">
      <label>Date</label>
      <input type="date" />
    </div>
  </div>

  <span class="comment">Notice how Date is smaller than Text when combined on a single line</span>
  <div class="input-row">
    <div class="input-group whalf">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group whalf">
      <label>Date</label>
      <input type="date" />
    </div>
  </div>

  <span class="comment">Notice how Date is smaller than Text when combined on a single line</span>
  <div class="input-row">
    <div class="input-group whalf">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group whalf">
      <label>Date</label>
      <input type="date" />
    </div>
  </div>


  <div class="input-row">
    <div class="input-group">
      <label>Text</label>
      <input type = "text" />
    </div>

    <div class="input-group">
      <label>Text2</label>
      <input type="text" />
    </div>
  </div>
</div>

How to get same width for input type text and input type date

2 Answers2