CODEWITHSUNDEEP
htmlcssflexbox
darkhorse
darkhorse

Reputation: 8722

Using fixed width on a flex item and adjusting the other items accordingly

I am trying to build input groups where multiple inputs can be placed next to each other. By default, they will take up equal widths, and I am using flexbox for the whole thing.

Here is what the code looks like:

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group > .input {
  position: relative;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  min-width: 0;
  margin-bottom: 0;
}

.input {
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
}

.width-50 {
  width: 50px !important;
}
<div class="input-group">
  <input class="input" type="text" placeholder="State">
  <input class="input" type="text" placeholder="School">
</div>
<br />
<div class="input-group">
  <input class="input width-50" type="text" placeholder="Title">
  <input class="input" type="text" placeholder="Full name">
</div>

The only issue I have is that I want to be able to change the widths of the inputs using utility classes. For example, the first input on the second row has the width: 50px property. However this does not work for some reason. On top of this, the second input on the second row should ideally stretch out and take up the rest of the width when the first input gets smaller. How can I fix this issue? Thanks for any help.

Upvotes: 0

Views: 30

Answers (2)

user125661
user125661

Reputation: 1568

I stripped your example to have a better focus on the solution. The code below does what you want. I use width: 50px to make the input smaller, and flex-grow: 0 to prevent it from growing larger than that. I use flex-grow: 1 on the other inputs to make sure they fill out the remaining space.

.input-group {
  display: flex;
}

.input {
  display: block;
  height: 20px;
  line-height: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  flex-grow: 1;
}

.width-50 {
  width: 50px;
  flex-grow: 0;
}
<div class="input-group">
  <input class="input" type="text" placeholder="State">
  <input class="input" type="text" placeholder="School">
</div>
<br />
<div class="input-group">
  <input class="input width-50" type="text" placeholder="Title">
  <input class="input" type="text" placeholder="Full name">
</div>

Upvotes: 2

yinsweet
yinsweet

Reputation: 2851

I just make sure the class .input.width-50 will not grow or shrink and updated the flex-basis to the desired width.

    .input.width-50 {
      flex: 0 0 50px;
    }


.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group > .input {
  position: relative;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  min-width: 0;
  margin-bottom: 0;
}

.input {
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
}

.input.width-50 {
  flex: 0 0 50px;
}
<div class="input-group">
  <input class="input" type="text" placeholder="State">
  <input class="input" type="text" placeholder="School">
</div>
<br />
<div class="input-group">
  <input class="input width-50 " type="text" placeholder="Title">
  <input class="input" type="text" placeholder="Full name">
</div>

Upvotes: 1

Related Questions