MDB-Select Input small


Topic: MDB-Select Input small

srxone pro premium asked 12 months ago

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 12 months 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).


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 Angular
  • MDB Version: MDB5 5.1.0
  • Device: AMD 64
  • Browser: Mozilla Firefox
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No