2

I am trying to use mat-autocomplete with a custom item height. I can adjust the option height using the following css:

.mat-option {
  height: 25px !important;
  line-height: 25px !important;
}

However, this causes the scrolling to break, when using the down arrow, the panel scrolls more than necessary.

The documentation references a constant: AUTOCOMPLETE_OPTION_HEIGHT which is set to 48px. Is there a way to override this constant? I've tried to feed the constant value in as a provider:

    //{
    //  provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
    //  useValue: {
    //    AUTOCOMPLETE_OPTION_HEIGHT: 25,
    //    AUTOCOMPLETE_PANEL_HEIGHT: 1250
    //  }
    //},
    { provide: AUTOCOMPLETE_OPTION_HEIGHT, useValue: 25},
    { provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}
  ]

this does not seem to have any effect.

How can I adjust the option height so that the panel will scroll correctly?

Thank you!

Jesse
  • 1,386
  • 3
  • 9
  • 23
John Azzolina
  • 120
  • 2
  • 8

0 Answers0