input-group elements are NOT responsive


Topic: input-group elements are NOT responsive

iamjonmiller pro asked a year ago

Expected behavior: When a <div class="input-group"> is rendered within a responsive element it should flex to fill the element.

Actual behavior: When a <div class="input-group"> is rendered within a responsive element it stays at a fixed, minimum, size.

Example: Take the example code for the search input-group and throw it in a card. I have tested with your snippet editor, it is not my custom code.

<div class="col-12">
  <div class="card mb-3">
    <div class="card-body">
      <form method="post" class="form-horizontal">
        <div class="input-group">
          <div class="form-outline">
            <input type="search" id="form1" class="form-control"/>
            <label class="form-label" for="form1">Search</label>
          </div>
          <button type="button" class="btn btn-primary">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Despite my best efforts I haven't been able to find a way to correct this behavior and have had to disable input-group elements for now.


Dawid Wajszczuk staff answered a year ago

Hi,

Try adding flex-fill class into <div class="form-outline">. It should solve the problem.

Keep coding,
Dawid


iamjonmiller pro answered a year ago

Is there anyway I can do this with an input-group that has a select inside? The dynamic generation of such elements makes it tricky to style.


Dawid Wajszczuk staff commented a year ago

Hi. Can you provide a snippet with the form that you try to accomplish? It will help a lot. Thanks.


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
  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No