Topic: Resize input-group to its input elements

Joachim Schneider priority asked 3 years ago


Expected behavior When I reduce the size of input-elements inside an input-group, the input-group should adjust its size.

Actual behavior The input-group is not adjusting the size.

Example Adding w-25 to the datepicker is not reducing the size of the input-group.

<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>

enter image description here


UNNdev priority commented 3 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 3 years ago

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


Joachim Schneider priority answered 3 years ago


If I set a fixed width to the form-outline, it is working. Example:

<div class="input-group">
  <div class="form-outline datepicker" style="width:100px">
    <input type="text" class="form-control"/>
    <label class="form-label">Start</label>
  </div>
</div>

Here the input-group is reducing its size. But then the hole input group has a fixed width. Is there a way to set the form-outline width to 50% of its regular size?

Thanks a lot


Dawid Wajszczuk staff commented 3 years ago

I don't understand what you are trying to accomplish. something like this https://mdbootstrap.com/snippets/standard/d-wajszczuk/3182090#html-tab-view , which was suggested by @UNNdev? Because I don't know why you need to set the form-outline width to 50% of its regular size. Could you explain it in more details?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.1
  • Device: Web
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No