Topic: input-group elements are NOT responsive

iamjonmiller pro asked 3 years 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>
          <button type="button" class="btn btn-primary">
            <i class="fas fa-search"></i>

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 3 years ago


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

Keep coding,

iamjonmiller pro answered 3 years 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 3 years 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.


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



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No