Topic: MDB-Select Input small
I'm trying to size Input of MDB-Select with class form-control-sm, but that don't affect Input component and break MDB-Select.
My HTML code:
<mdb-form-control>
<mdb-select [(ngModel)]="filterObj.length" (valueChange)="filterModul($event)">
<mdb-option [value]="5">5</mdb-option>
<mdb-option [value]="10">10</mdb-option>
<mdb-option [value]="15">15</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Enteries</label>
</mdb-form-control>
Inspect element give me this code:
<mdb-select _ngcontent-ng-c3157040990="" class="ng-tns-c1912133661-6 select d-block ng-valid ng-star-inserted active ng-touched ng-dirty" ng-reflect-model="10" aria-multiselectable="false" aria-haspopup="true" aria-disabled="false" aria-expanded="false" aria-role="listbox">
<input mdbinput="" type="text" readonly="" class="form-control select-input ng-tns-c1912133661-6 active"
placeholder="">
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<span class="select-arrow ng-tns-c1912133661-6"></span>
<!--container-->
Enteries
When I edit Input in browser inspect window to this
<input mdbinput="" type="text" readonly="" class="form-control form-control-sm select-input ng-tns-c1912133661-6 active" placeholder="">
I got nice select:
My question is how to size Input od MDB-Select with form-control-sm class?
Arkadiusz Idzikowski staff answered a year ago
We need to add new size
input to the component to add support for this feature. I added this to our to do list and it should be available in the next update (which should be available within two weeks).
As a workaround for now you would need to add the form-control-sm
class manually to the specific input element (or styles the Select component using the properties from form-control-sm
class).
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 Angular
- MDB Version: MDB5 5.1.0
- Device: AMD 64
- Browser: Mozilla Firefox
- OS: Windows 11
- Provided sample code: No
- Provided link: No