Customize the height of the Angular Material autocomplete dropdown to meet your needs

Question

Customize the height of the Angular Material autocomplete dropdown to meet your needs

Context

I have been working on a customized autocomplete feature using Angular Material, and I need to adjust the height of the dropdown results box for better visibility.

Exploration

After conducting some research, I discovered that Angular Material currently does not provide built-in support for modifying the height of the autocomplete dropdown. However, there are discussions and possible solutions available for Angular Material 2 (which will be compatible with AngularJS2):

https://github.com/angular/material/issues/5132 (potential solution 1)
https://github.com/angular/material/issues/4772 (potential solution 2)
https://github.com/angular/material/pull/8397 (indicates that the issue may not be fixed)
https://groups.google.com/forum/#!topic/ngmaterial/4ActiQp3nA0 (discusses Angular Material 2 and deprecation of Angular Material)

Despite some suggestions about manipulating CSS styles (Angular Material Design Layout custom sizes) as a workaround, I haven't been successful in implementing these workarounds effectively.

Code Snippets

The project consists of an index.html, autocomplete.js, and server.js files along with mockData.json file.

Below are excerpts from the index.html, autocomplete.js, and style.css files. You can view the live demo hosted on Cloud9 if the server is active:

Additionally, here are snippets from the server.js file and the contents of the mockData.json file.

Query

Is there a way to increase the height of the dropdown box displaying autocomplete results?

javascript css angularjs autocomplete angular-material

Answer 1

Answer №1

One way to customize the number of dropdown items in an Angular Material autocomplete is by using the undocumented parameter md-dropdown-items:

<md-autocomplete 
    md-selected-item="selectedItem" 
    md-search-text="searchText" 
    md-items="item in getMatches(searchText)"
    md-item-text="item.display"
    md-dropdown-items="10">
        <span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

The default value for this parameter is 5.

If you want to dynamically adjust the number of dropdown items based on window height, you can do so by setting it in your controller:

<md-autocomplete
    md-selected-item="selectedItem"
    md-search-text="searchText"
    md-items="item in getMatches(searchText)"
    md-item-text="item.display"
    md-dropdown-items="nbItems">
       <span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

Then, define the value of nbItems in your controller, like this:

$scope.nbItems = 5 + $mdMedia('(min-height: 400px)') * 5 + $mdMedia('(min-height: 600px)') * 10;

This setup will display 5 items if the height is less than 400px, 10 items if less than 600px, and 20 items if greater than 600px.

I hope this explanation helps!

Just a reminder: the md-dropdown-items parameter only works for md-autocomplete, not for md-select.

It's a shame that it doesn't work for md-select too ;)

Answer 2

One way to customize the number of dropdown items in an Angular Material autocomplete is by using the undocumented parameter md-dropdown-items:

<md-autocomplete 
    md-selected-item="selectedItem" 
    md-search-text="searchText" 
    md-items="item in getMatches(searchText)"
    md-item-text="item.display"
    md-dropdown-items="10">
        <span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

The default value for this parameter is 5.

If you want to dynamically adjust the number of dropdown items based on window height, you can do so by setting it in your controller:

<md-autocomplete
    md-selected-item="selectedItem"
    md-search-text="searchText"
    md-items="item in getMatches(searchText)"
    md-item-text="item.display"
    md-dropdown-items="nbItems">
       <span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

Then, define the value of nbItems in your controller, like this:

$scope.nbItems = 5 + $mdMedia('(min-height: 400px)') * 5 + $mdMedia('(min-height: 600px)') * 10;

This setup will display 5 items if the height is less than 400px, 10 items if less than 600px, and 20 items if greater than 600px.

I hope this explanation helps!

Just a reminder: the md-dropdown-items parameter only works for md-autocomplete, not for md-select.

It's a shame that it doesn't work for md-select too ;)

Answer 3

Answer №2

Origins

Following extensive trial and error, I have uncovered a workaround that addresses the issue at hand.

The so-called fix I've devised is more of a clever hack than a definitive solution. Unfortunately, official support for this particular problem is nonexistent, especially in Angular Material 1 which has been deprecated to pave the way for Angular Material 2 without ongoing maintenance.

Solution Overview

My workaround centers around an approach shared on GitHub, effectively overriding the default CSS settings with the following snippet:

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    height: 24vh;
    min-height: 12vh;
    max-height: 24vh !important;
}

Dive Deeper

This code circumvents the standard CSS rules by utilizing the !important declaration and specifying custom height values, predominantly using the vh unit but adaptable to px or any other metric.

While effective for a single autocomplete dropdown or uniform dropdowns throughout, conflicting implementations may emerge if dealing with disparate autocompletes due to the blanket override applied to all instances.

Closing Thoughts

Admittedly imperfect, this workaround remains serviceable as long as excessive customization isn't required within the autocomplete functionality.

I trust this insight proves beneficial to those encountering similar challenges down the line!

Answer 4

Origins

Following extensive trial and error, I have uncovered a workaround that addresses the issue at hand.

The so-called fix I've devised is more of a clever hack than a definitive solution. Unfortunately, official support for this particular problem is nonexistent, especially in Angular Material 1 which has been deprecated to pave the way for Angular Material 2 without ongoing maintenance.

Solution Overview

My workaround centers around an approach shared on GitHub, effectively overriding the default CSS settings with the following snippet:

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    height: 24vh;
    min-height: 12vh;
    max-height: 24vh !important;
}

Dive Deeper

This code circumvents the standard CSS rules by utilizing the !important declaration and specifying custom height values, predominantly using the vh unit but adaptable to px or any other metric.

While effective for a single autocomplete dropdown or uniform dropdowns throughout, conflicting implementations may emerge if dealing with disparate autocompletes due to the blanket override applied to all instances.

Closing Thoughts

Admittedly imperfect, this workaround remains serviceable as long as excessive customization isn't required within the autocomplete functionality.

I trust this insight proves beneficial to those encountering similar challenges down the line!

Customize the height of the Angular Material autocomplete dropdown to meet your needs

Context

Exploration

Code Snippets

Query

Answer №1

Answer №2

Origins

Solution Overview

Dive Deeper

Closing Thoughts

Similar questions

Shorten a data point in JSON code

Manipulate a table using Jquery's find() method to insert a cell populated with information from an array using before()

Glitch in JavaScript: Converting Text to Numbers

The addDays method cannot be used with date variables

What could be causing Vuejs to not update elements promptly?

Tips for using Jquery to round up currency values

Group by month and calculate the total sum using mongoose in MongoDB

Using CSS grid can allow for paragraphs to overlap on top of each

Transfer an object for reusability in a different JavaScript file without utilizing the default operator

Making if-else statements easier

Tips for creating a menu that stays fixed to the page even when positioned absolutely

Switch between classes when hovering over / exiting ngFor elements

The average calculation malfunctioning after adjusting the input data

Deleting a product category along with all its products: Understanding the basics of CRUD操作

The Ionic search bar will only initiate a search once the keyboard is no longer in view

Utilize Meteor and Mongo to access a nested array object in a template with spacebars

Receive a 404 error message while navigating through routes in Laravel

Steps to calculate the total number of rows in a datatable

Tips on how to make content slide upwards

Having trouble with closing the window on Mozilla and Chrome? Keep getting a scripting error message?