CODEWITHSUNDEEP
cssangular-material
swordfish
swordfish

Reputation: 959

Angular 8 Material - Customize select option style to fit your needs

I have an element of select options, each option have two texts, card number and a label that shows your card balance, i want to float them in one line with a space between, like this image:

enter image description here

I've tried display flex but it didn't take any effect.

<mat-form-field>
    <select matNativeControl required>
        <option value="default">Select your card</option>
        <option value="card_number">
            1234 4567 8901 2345
            <span class="label">1,200000$</span>
        </option>
    </select>
</mat-form-field>

Upvotes: 1

Views: 3244

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

try to use Basic mat-select

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option>
        <div> 4567 8901 2345</div>
        <div class="label">1,200000$</div>
    </mat-option>
  </mat-select>
</mat-form-field>

and in css:

::ng-deep .mat-option-text{
  display: flex!important;
    justify-content: space-between;

}

See stackblitz code

Note! I guess you can not deal with the selected value

Upvotes: 1

Related Questions