Unable to get form-control-sm to work on Select Dropdowns


Topic: Unable to get form-control-sm to work on Select Dropdowns

jmallory927 pro premium priority asked 2 years ago

Expected behavior I would expect that both the Text input and the Select would be small text.

Actual behavior The Text input is small, the Select is not.

Resources (screenshots, code snippets etc.)

            <div class="input-group mb-3">
          <div class="form-outline">
            <input type="text" class="form-control form-control-sm" id="customer_name" required />
            <label class="form-label" for="customer_name">Customer Name</label>
            <div class="invalid-feedback">Please provide a Customer Name</div>
          </div>
          <div class="">
            <select id="modifiers" name="modifiers" class="form-control form-control-sm select" data-mdb-placeholder="Mods" multiple>
              <option value="1">High Priority</option>
              <option value="2">Resolved</option>
              <option value="3">Words</option>
            </select>
            <label class="form-label select-label" for="modifiers">Mods</label>
          </div>
        </div>

kpienkowska staff answered 2 years ago

I've prepared snippet with a small select for you: https://mdbootstrap.com/snippets/standard/kpienkowska/4943170


jmallory927 pro premium priority answered 2 years ago

Did you notice that the size of the dropdown words do not change, just the appearance of the container? The problem is still the size of the text appears much larger than it should.

Also, when you add the class form-control-sm to DIV, it breaks the Input Group that it was in?


kpienkowska staff answered 2 years ago

I've created a new snippet. I made the select and dropdown smaller. If you want to change font size in the dropdown you can do that with custom CSS. https://mdbootstrap.com/snippets/standard/kpienkowska/4954030


jmallory927 pro premium priority commented 2 years ago

So that is closer, but still not there. The menu that pops out has text that is large while the holder name is small. Is there a way to affect the options?


jmallory927 pro premium priority commented 2 years ago

i "solved" it by adding some CSS:

.select-option-text{ font-size: 12px; }


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: Windows or Mac
  • Browser: Chrome
  • OS: Windows 11 - MacOS 13.1
  • Provided sample code: No
  • Provided link: No