Modifying the Dropdown height in Angular: A step-by-step guide

Currently, I am utilizing Angular, Angular Material, and css

I'm facing difficulties in reducing the height of the mat-select Dropdown and achieving proper vertical alignment for the text inside it.

<mat-select class="frequency-dimensions" formControlName="frequency" (change)="disableSubmitButton=false" disableOptionCentering panelClass="custom-panel-frequency">
  <mat-option value="daily" selected>Daily</mat-option>
  <mat-option value="total">Total</mat-option>
</mat-select>

In my styles.scss

.custom-panel-frequency {
  margin: 34px 0px !important;  
  min-width: 100px !important;
}

The associated scss defines it as follows..

.frequency-dimensions {
  min-width: 100px;
  width: 100px;
  vertical-align: middle;
}

How can I adjust the height of the Dropdown to around 33px, align the Dropdown to the center of the text, and ensure its content is vertically aligned?

The alignment of the Total Dropdown should match that of the date control depicted below

https://i.sstatic.net/Dclwc.png

UPDATE

Upon reducing the Dropdown height to 25px, this is how it appears...

https://i.sstatic.net/CEEnS.png

Adjusting margins causes the Dropdown Panel to shift...

Ultimately, I modified the frequency-dimensions to...

.frequency-dimensions {
  min-width: 100px;
  width: 100px;
  height: auto;
  min-height: auto;
}

These changes resulted in a larger appearance as shown below. My goal is to simply reduce the height without affecting the panel.

https://i.sstatic.net/h4Aas.png

I aim to decrease the height to 75% of the previous Dropdown while maintaining proper vertical alignment of its content within the panel..

UPDATE 2

Following the new answer, the Total Dropdown now appears larger by 25%, which doesn't match the height of the Date Control box.

https://i.sstatic.net/ezA6U.png

UPDATE 3 After reducing the height to 28px, this is the result..

https://i.sstatic.net/E3BVJ.png

UPDATE 4

Implementing the suggested solution results in the Dropdown displaying like this...

https://i.sstatic.net/f6YNS.png

Any assistance on this matter would be highly appreciated..

cssangularangular-material

Answer №1

UPDATE

If you encounter issues, experiment with changing the top value to negative numbers in the CSS below. Although the stackblitz may be incorrect, it serves as a guide for adjusting text to suit the container!

.frequency-dimensions {
  border: 1px solid black; // This line can be ignored!
  height: 28px !important;
  vertical-align: middle;
  display: flex !important;
  align-items: center;
  position: relative;
  width: 100px !important;
}

.frequency-dimensions .mat-mdc-select-trigger {
  position: absolute;
  top:-2px;
}

View Stackblitz Demo

The following CSS code appears to work well! I utilized mat-form-field since your image has an outline!

CSS:

.form-field-custom {
  display: flex !important;
  height: 33px !important;
}

.form-field-custom .mat-mdc-text-field-wrapper {
  height: inherit !important;
}

.form-field-custom .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
  height: inherit !important;
  display: flex !important;
}

.form-field-custom .mat-mdc-form-field-infix {
  padding: 0 !important;
  width: 100%;
  height: inherit;
  display: flex;
}
.frequency-dimensions {
  height: 33px !important;
  vertical-align: middle;
  display: flex !important;
  align-items: center;
}

HTML:

<mat-form-field appearance="outline" class="form-field-custom">
  <mat-select
    class="frequency-dimensions"
    formControlName="frequency"
    (change)="disableSubmitButton=false"
    disableOptionCentering
    panelClass="custom-panel-frequency"
  >
    <mat-option value="daily" selected>Daily</mat-option>
    <mat-option value="total">Total</mat-option>
  </mat-select>
</mat-form-field>

View Stackblitz Demo

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

How can an additional value be sent to the form validation method?

I have created a form group like this: import { checkPasswordStrength } from './validators'; @Component({ .... export class PasswordComponent { ... this.userFormPassword = this.fb.group({ 'password': ['', [ ...

javascriptangulartypescript

Adjust the placement of image when changing the size of the window

Is there a way to prevent an image with a fixed position from covering up page content when the browser window is resized? <div > <img id="img1" class="wrapperImage"></img> </div> <style type="text/css"> .wrapperImag ...

htmlcss

Can you explain the purpose behind using this syntax within the subscribe function?

.subscribe(data=> { this.timezones = data; } Is the 'data' variable used in the .subscribe() method the same as the one declared in the constructor (private: data)? What does the arrow symbol mean and what is its purpose? export class X ...

angular

Save the application's state of the user in a mean stack program

In my Angular 9 application, I have forms with multiple sections. The first section includes name and personal details, the second part covers primary school information, and the third part focuses on past jobs held by the user. Each part is displayed in a ...

mysqlnode.jsangularngrxngrx-store

Linking together observables to handle the response received from the PrimeNG confirmation service

Currently, I am utilizing the confirm.service from PrimeNG in my application. My goal is to display an array of messages to the user with only one message shown at a time along with an Accept button. However, my current code is only displaying the last me ...

angulartypescriptobservable

What distinctions exist between setting width: auto; and width: fit-content;?

As far as my understanding goes, when you apply width: fit-content; to an element, it signifies that the element's width will expand to utilize all available space, but will not shrink below the min-content size within the element. However, does the d ...

htmlcss

Building a scrollable dropdown menu with Bootstrap 5: A step-by-step guide

The search for suitable code examples for scrollable dropdown menus compatible with Bootstrap 5 has been challenging. Are there any contemporary methods available to achieve this functionality seamlessly? ...

javascripthtmlcssbootstrap-5

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...

htmlcss

Is there a way to retrieve the Angular-Redux store in a child module?

Within my Angular application, I utilize angular-redux for managing the application state. In my main module, I have defined the redux store in the following manner: export class MainModule { constructor(private ngRedux: NgRedux<MainAppState>, ...

javascriptangularangular-moduleangular-redux

How to test Angular HttpClient in protractor end-to-end testing

Upon loading my application, an http call is made to the backend which causes my e2e test to fail in CI pipelines where no backend is available. I attempted to handle the error using the rxjs catchError operator on the http call. Additionally, I tried wr ...

angularprotractore2e-testing

Unlimited Possibilities in Designing Shared React Components

Seeking the most effective strategies for empowering developers to customize elements within my React shared component. For example, I have a dropdown and want developers to choose from predefined themes that allow them to define highlight color, font siz ...

javascriptcssreactjssassnext.js

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

jquerycss

Exploring the best practices for integrating Bootstrap into a Webpack and Angular2 project

I am looking to incorporate Bootstrap into my Angular2 project, including both the CSS and JS files. What is the best way to include these files in the project to ensure webpack functions properly? In the previous version using systemjs, it was included i ...

jqueryangulartypescripttwitter-bootstrap-3webpack

Encountering an Uncaught ReferenceError in Angular 8 and Webpack 4: Issue with vendor_lib not being defined plus source map error

Recently, I started working on a relatively simple interface that was initially developed in Angular2. As someone new to Angular2 and webpack, there were some challenges. I successfully upgraded the project from Angular 2.4 to Angular 8.0. Additionally, ...

node.jsangularwebpack

Bug in timezone calculation on Internet Explorer 11

I've spent hours researching the issue but haven't been able to find any effective workarounds or solutions. In our Angular 7+ application, we are using a timezone interceptor that is defined as follows: import { HttpInterceptor, HttpRequest, H ...

javascriptangulartypescripttimezoneinternet-explorer-11

Angular's error notification system seems to be lacking in providing accurate

I'm experiencing an issue with my angular app where errors are not displayed properly. Instead of showing errors in the component and line number, they always appear in main.js. This is different from how errors are displayed in my other angular appli ...

angulartypescriptionic-framework

Typescript with Angular: Despite having 7 values in the map, Map.get is returning undefined

Why does Map.get always return undefined when using a number from a form element (extra1) in this code snippet? extraById = new Map<number,Extra>(); @Input() extra1: number = -1; formChanged(carConfigurationFormChanged : any) { const index ...

angulartypescriptdictionaryhashtable

My navigation bar is giving me a bit of trouble, as there are two separate issues that seem to be interconnected

Looking for some help with my navigation bar layout. You can also check out the code on fiddle http://jsfiddle.net/SgtRx/ (should have done this earlier, sorry). I'm a beginner when it comes to coding, so please bear with me if I make any mistakes. ...

htmlcss

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

javascripthtmlcss

Center a sans-serif font vertically with exact precision while adjusting the font size

My issue is an expansion of a previous problem I mentioned in another question, which can be found here Vertically align sans-serif font precisely using jquery/css. To summarize: I am aiming to align two divs containing text, with one positioned above the ...

javascriptjqueryhtmlcssfonts