Select box - Flex preventing select from filling row


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>

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.


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


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: 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