Topic: Select box - Flex preventing select from filling row
twineagles pro premium priority asked 2 years ago
*Expected behavior*Select box is the only item in the row, and should fill the entire width.
*Actual behavior*Select box won't expand to the full width. Limits to about a col-3 setting. flex-fill & flex-grow-1 don't seem to work.
Resources (screenshots, code snippets etc.)https://mdbootstrap.com/snippets/standard/twineagles/4427336
<div class="row justify-content-center">
<div class="col-lg-8 align-self-center">
<form class="needs-validation novalidate" id="step1" method="POST" action="action/DO_step1.php">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Select Card</h6>
</div>
<div class="card-body p-3">
<div class="row mb-2">
<div class="col">
<div class="input-group" >
<select name="item" id="item" class="select flex-grow-1" disabled>
<option value='1'>Test Item</option>
</select>
<label class='form-label select-label' for='item'>item</label>
</div>
</div>
</div>
<hr>
<div class="row mb-2 d-flex">
<div class="col flex-fill">
<div class="input-group" >
<select name="owner" id="owner" class="select flex-grow-1" >
<option value="1" selected>Test Monkey</option>
<option value="2" selected>Test2 Monkey</option>
</select>
<label class="form-label select-label" for="owner">Owner</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Grzegorz Bujański staff answered 2 years ago
In this case, just remove the div with input-group
class. It causes that the inputs are not 100% of the parent's width
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: Windows
- Browser: Chrome
- OS: PHP/Apache/Bootsrap5/Vanilla Javascript
- Provided sample code: No
- Provided link: Yes
twineagles pro premium priority commented 2 years ago
I tried every sort of class I could think of, col, col-8, col-12, d-flex, flex-fill, flex-grow-1. I can manually turn on display: flex in chrome developer tools so I tried "d-block" in the input-group class and that worked.
twineagles pro premium priority commented 2 years ago
d-block works, so I could close this question, but I think I will leave it up in case anyone else has the same issue.