CODEWITHSUNDEEP
autocompleteangular-material2
MrCalico
MrCalico

Reputation: 371

angular material2 autocomplete option row size

Is there a directive, style or CSS setting to allow a change of the row size of the options?

The options seem to be spaced pretty far apart.

I was able to change the font & line-height but not the row height.

Thanks!

Upvotes: 0

Views: 2684

Answers (3)

C.M.
C.M.

Reputation: 1561

With version 15 I had to do this:

.autocomplete-option {
    height: 20px;
    font-size: 12pt;
    min-height: unset;
}

Upvotes: 0

rdanielmurphy
rdanielmurphy

Reputation: 21

Couldn't you just add this css?

.mat-option {
  height: 25px;
  font-size: 12px;
}

or in an older version of Material:

.md-option {
  height: 25px;
  font-size: 12px;
}

Upvotes: 1

Nehal
Nehal

Reputation: 13307

Within the <md-option> tag, you can put an inline style like this style="height: 30px"

I have created this Demo from material2 example.

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredStates | async" [value]="state" style="height: 30px">
    {{ state }}
  </md-option>
</md-autocomplete>

Upvotes: 0

Related Questions