I'm working with Bootstrap elements that look 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d5651565043520f4f435647504b434e0f4647514b454c62160c130c13">[email protected]</a>/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"></link>
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f7e8f7f7e2f5a9edf4c7b6a9b6b5a9b1">[email protected]</a>/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ed3939f8a9b8c979f92d39a9b8d979990becad0cfd0cf">[email protected]</a>/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
</script>
</body>
</html>The crucial 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 issue arises when it only occupies a small portion of the available space. It wraps the input element in a limited space, resulting in a short input line.
If I use it without the input-group or form-group div, it works normally.
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f4443444251401d5d5144554259515c1d54554359575e70041e011e01">[email protected]</a>/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"></link>
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdcc3dcdcc9de82c6dfec9d829d9e829a">[email protected]</a>/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e3532353320316c2c2035243328202d6c25243228262f01756f706f70">[email protected]</a>/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
</script>
</body>
</html>I've checked the developer console in Chrome but couldn't find anything causing this behavior.
Any suggestions on how to achieve the "normal" behavior with both divs?