Topic: Unable to get form-control-sm to work on Select Dropdowns
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>
I've prepared snippet with a small select for you: https://mdbootstrap.com/snippets/standard/kpienkowska/4943170
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?
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; }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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