Resize input-group to its input elements

Topic: Resize input-group to its input elements

Joachim Schneider priority asked 2 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 2 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 2 years ago

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

Add comment

Joachim Schneider priority answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

Joachim Schneider

69Support score
9Questions 2Answers 0Snippets