What are some ways to adjust the height of a mat-select (style)?

By using the ::ng-deep selector, I was able to solve the problem. However, it affected all mat-select elements in the same module. How can I change the style of just one specific mat-select component?

::ng-deep .mat-select-panel{
    max-height: none!important;
}

Edit:

<div class="col-md-2 kt-margin-bottom-10-mobile">
                        <div class="kt-form__control">
                            <mat-form-field >
                                <mat-select [(value)]="searchOption"
                                            class="mat-form-field mat-form-field-fluid"
                                            placeholder="Search by...">
                                    <mat-option value="all"><span>All</span></mat-option>
                                    <mat-option value="ref"><span>Reference</span></mat-option>
                                    <mat-option value="name"><span>Name</span></mat-option>
                                    <mat-option value="team"><span>Team</span></mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>
                    </div>

Answer №1

It's important to note that the mat-select-panel is actually located outside of your component, within the .cdk-overlay-container. This means you cannot directly change the CSS for just your own component's mat-selects.

However, there is a workaround. You can add a class to the select-panel and then use a proper ng-deep rule to style it accordingly.

<mat-form-field>
    <mat-select [(value)]="searchOption"
                class="mat-form-field mat-form-field-fluid"
                panelClass="auto-height"                    <-- adding class to panel here
                placeholder="Search by...">
        <mat-option value="all"><span>All</span></mat-option>
        <mat-option value="ref"><span>Reference</span></mat-option>
        <mat-option value="name"><span>Name</span></mat-option>
        <mat-option value="team"><span>Team</span></mat-option>
    </mat-select>
</mat-form-field>

In your SCSS file:

::ng-deep .mat-select-panel.auto-height {
  max-height: none;
}

Alternatively, you can also add this styling to your material-overload.scss file if you already have one. If not, simply add it to your styles.scss file to avoid using ng-deep altogether:

.cdk-overlay-container {
  .mat-select-panel.auto-height {
    max-height: none;
  }
}

Answer №2

If you want to achieve this,

// Make sure to assign an ID to the following div element in your HTML code
<div class="col-md-2 kt-margin-bottom-10-mobile">
     <div class="kt-form__control">
         <mat-form-field id="search-option-id"> <-- Add the ID Here
              <mat-select 
                  [(value)]="searchOption"
                  class="mat-form-field mat-form-field-fluid"
                  placeholder="Search by..."
              >
                   <mat-option value="all"><span>All</span></mat-option>
                   <mat-option value="ref"><span>Reference</span></mat-option>
                   <mat-option value="name"><span>Name</span></mat-option>
                   <mat-option value="team"><span>Team</span></mat-option>
              </mat-select>
         </mat-form-field>
     </div>
 </div>



// To apply specific styling, follow these steps: 

#search-option-id > mat-select { <-- Customize CSS for this element
  ::ng-deep .mat-select-panel {
    max-height: none!important;
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending an HTTP request to an ASP.net Web API with user authentication from an Ionic Angular application

I've encountered a challenge while attempting to send an http get request to an ASP.net Web API that requires user authentication. My aim is to retrieve a JSON file from the API. I am currently working on developing an Ionic Angular application and my ...

Do not include scrollbar measurements when using percentages?

Scenario: Consider the elements parent, child1, and child2 child2 has its height and overflow properties set so that its content displays with a vertical scrollbar Both child1 and child2 contain child elements with percentage-based width values Observati ...

I seem to be having a problem with CSS and Flexbox sizing. Does anyone have an explanation for what might be

Hey there! I'm currently in the process of building a Netflix clone, and everything seems to be working well except for one issue with the layout. No matter how I adjust the width of the div containing the images, they just won't change size. I&a ...

Tips for positioning a div at the bottom using Bootstrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/css/bootstrap.min.css"> <div class="co ...

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

Font color glitch in Internet Explorer

Currently, I am encountering difficulties with font colors in Internet Explorer. Despite specifying a color in my CSS, IE seems to be disregarding it. The color is defined here: .entry-info a { color: #663399; cursor: pointer; } This issue seems ...

Guide to customizing Bootstrap 5 modal SCSS properties in a React project

Having a modal in the page header can be tricky, especially when the page header has a position:fixed attribute. This can cause the bootstrap modal backdrop to overlay at the top, making it impossible to interact with the modal. I attempted to solve this ...

Content below divs that are fixed and absolutely positioned

I have a design layout similar to this (a small snippet) and I am facing an issue where the text within .content is not clickable. The positioning of #gradient is fixed due to the background image, and #empty has an absolute position to cover the entire bo ...

Recently, there has been an issue with the size of SVG images specifically on Android Chrome

UPDATE: I have narrowed down the issue to two SVG images that can be found here: . Strangely, Chrome on Android is displaying the second SVG image underneath the first. Take a look at this screenshot of the incorrect rendering on the Chrome browser for And ...

Maintaining text in a straight line

My design includes an image floated to the left with text aligned to the right of the image. Unfortunately, the text is too long, causing a line from a paragraph to drop below the image. How can I ensure that the text stays in line with the paragraph and ...

Stop the div underneath from scrolling on iOS Safari

I have a div that has a height of 100%, equivalent to 70% of the viewport height, with an overflow:scroll property. Now I would like to add an overlaying div that touch devices can use to scroll the entire page instead of just the div. I attempted to cre ...

In IE9, the margin: auto property does not effectively center a div element

I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look: After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: ...

Having trouble with Floating Labels in Bootstrap 5

Having trouble with my floating labels - any advice? https://i.sstatic.net/fk0CG.png Here is the code snippet: <div class="form-floating mb-3"> <input type="text" class="form-control" autofocus id="txtNome" placeholder=" "> <la ...

Thumbnail Alert: Currently experiencing technical difficulties. Services temporarily unavailable

Greetings to the Stack Overflow Community! I am currently encountering a challenge and would greatly appreciate any guidance. In my situation, I have an image stored on OneDrive and I am using the following link to fetch a specific thumbnail of the image ...

The alignment of the text within the 'li' element is not as anticipated

CSS code: ul { list-style: none; padding:0; margin:0; } li { padding-left: 1em; text-indent: -.7em; } li:before { content: "• "; color: #28B779; /* or any other color you like */ font-size:2em; } <ul> <li ...

Expanding iframe elements

I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achi ...

What is the Purpose of Including the Reducer Name in the NGRX State Tree?

I've encountered an issue while using NGRX to store a simple object. When the object is added to the state tree, the reducer's name is also included, causing problems when I try to strongly type my selector and subscribe to it. Here is the code ...

Developing a dynamic scheduling system with PHP

I have just started learning php and I'm completely lost. My goal is to create a calendar layout that is 4 rows by 4 columns. Each row and column should represent one month, for example January, February, March, and April in the first row. I'm no ...

Achieving a floating effect by moving elements from the bottom left corner to the top right corner

Is there an innovative and efficient method to align elements from the bottom left corner to the top right corner? I have attempted using display: grid, but it is too rigid with fixed columns and a limit of 10 items. I am in search of a clever solution th ...

Hovering over the Bootstrap menu to activate clickable options

I have made modifications to the bootstrap navigation using jQuery so that instead of clicking, you can simply hover to enable the dropdown menu. However, I am facing an issue where the first menu option is not clickable. For example, currently the "BLOG" ...