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

jmallory927 priority asked 1 year 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>

Kamila Pieńkowska staff answered 1 year 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 priority commented 1 year 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 priority commented 1 year ago

i "solved" it by adding some CSS:

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


jmallory927 priority answered 1 year 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?


Kamila Pieńkowska staff answered 1 year ago


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



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

  • ForumUser: Priority
  • 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