Resize input-group to its input elements

<div class="input-group">
  <span class="input-group-text" role="button">
    <i class="fas fa-angle-left"></i>
  </span>

  <div class="form-outline datepicker w-25">
    <input type="text" class="form-control"/>
    <label class="form-label">Start</label>
  </div>

  <div class="form-outline datepicker w-25">
    <input type="text" class="form-control"/>
    <label class="form-label">End</label>
  </div>

  <span class="input-group-text" role="button">
    <i class="fas fa-angle-right"></i>
  </span>
</div>

UNNdev pro premium priority commented 4 years ago

Why do you expect the size of the parent to change? That makes no sense. input-group is a flexbox container with 100% width. If it was do shrink, what do you want to base your w-25 on? w-25 means 25% of the parent's width. If you want something else, add d-inline-flex w-auto to the input-group and give your form-outlines a fixed width.

---

Dawid Wajszczuk staff commented 4 years ago

@Joachim Schneider Did UNNdev's answer solve your problem?

---