CODEWITHSUNDEEP
htmlcssinputbootstrap-4formgroups
Marko Zadravec
Marko Zadravec

Reputation: 8740

Bootstrap Wrap content inside input-group div

I have Bootstrap elements something like this :

<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body class="bg-light">

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <div class="form-group">
      <label class="bmd-label-static" for="element"> Element</label>
      <select class="form-control" name="element" id="element" required>
        <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
        <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
        <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
      </select>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $('body').bootstrapMaterialDesign();
    });
  </script>
</body>

</html>

The important part is the input-group 

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <div class="form-group">
      <label class="bmd-label-static" for="element"> Element</label>
      <select class="form-control" name="element" id="element" required>
        <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
        <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
        <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
      </select>
    </div>
  </div>

The problem is that it use only small portion of the space. It wrap input element in only used space, what results in very short input line.

The think is if I use it without input-group or form-group div it work normal.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body class="bg-light">

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <select class="form-control" name="element" id="element" required>
      <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
      <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
      <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
    </select>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $('body').bootstrapMaterialDesign();
    });
  </script>
</body>

</html>

I check the developer console in Chrome, but I couldn't found anything that will cause this behaviour.

How to have the "normal" behaviour with both divs?

Upvotes: 0

Views: 2233

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13417

Add flex: 1;padding-top: 1rem; on this 

.form-group.bmd-form-group.is-filled {
   flex: 1;
   padding-top: 1rem;
}

The input-group has display: flex on it. That is why its children take only the space according to the content. For them to take full space you need to add flex:1 to it so that the element grows upto the width available.

.form-group.bmd-form-group.is-filled {
  flex: 1;
  padding-top: 1rem;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body class="bg-light">

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <div class="form-group">
      <label class="bmd-label-static" for="element"> Element</label>
      <select class="form-control" name="element" id="element" required>
        <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
        <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
        <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
      </select>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $('body').bootstrapMaterialDesign();
    });
  </script>
</body>

</html>

Upvotes: 2

Related Questions