How to style Angular Material Dropdowns: Trimming the Left and Right Sides using CSS

Seeking to customize Angular Material Select to resemble a basic dropdown. Even after applying the disableOptionCentering, the dropdown list options still expand from the left and right sides (refer to Current picture below). The desired look would involve slimming down the left and right sides. How can this be achieved?

https://material.angular.io/components/select/overview

<h4>Basic mat-select</h4>
<mat-form-field appearance="outline">
  <mat-label>Favorite food</mat-label>
  <mat-select disableOptionCentering>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Current appearance:

Adjustments needed to trim the left and right sides, apply margin/padding accordingly for a vertical alignment

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

Desired outcome:

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

cssangulartypescriptangular-materialangular7

Answer №1

The official documentation of material design outlines how to achieve this, but it seems that some CSS adjustments may be necessary to display the material styling correctly. You can customize the CSS to mimic the look of Angular Material.

<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

This topic is also discussed in more detail in this thread: How to show options under select (Angular material 7)?

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

Instantiate a fresh object using the new keyword followed by the Class constructor, and if desired,

I'm looking for a class that I can easily create new instances from and optionally assign properties using the constructor. For instance: class Person { name: string; age: number; constructor(props: {name?: string, age?: number}) { this.nam ...

typescriptclassconstructor

Tips for avoiding divs from overlapping when the window size is modified

When I maximize the browser, everything aligns perfectly as planned. However, resizing the window causes my divs to overlap. Despite trying several similar posts on this issue without success, I have decided to share my own code. CODE: $(document).read ...

javascriptjqueryhtmlcss

Trigger an event in Angular 2 and send it to the main application component

I need to trigger an event from a component that serves as the starting point of my application. This particular component manages a websocket connection and I must send a message, hence the need to trigger this event. The bootstrap component only contain ...

angularangular2-routingeventemitter

Is it possible to implement a customized pathway for the functions within an Azure function app?

Recently, I set up a new function app on Azure using Azure Functions Core Tools with Typescript as the language. The app includes a test function named MyTestFunction that responds with an HTTP response when called. This particular function is located in ...

typescriptazureazure-functionslocalhostfunc

Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur. I tried applying 'white-space', but it didn't work as expected. <ul class="s ...

javascriptjqueryhtmlcssbootstrap-4

Angular does not automatically cancel a wrapped HTTP Request when unsubscribing

Update: The reason for not using the built-in HttpClient and instead opting to use our own HttpService is because we need to intercept the response. Our custom HttpService wraps the Angular provided HttpClient to apply headers, authorizations, and perform ...

angularhttpangular-http

What is the best way to create a button with a dynamic background animation in React?

Looking to design a button with an animated background, possibly in gif or video format. An example of what I have in mind is the DOWNLOAD button on this website's main page: Ideally, I am hoping for a solution using React. ...

javascriptcssreactjsuser-interfaceuser-experience

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Is it possible to run a function when there is a change in either a document within the parent collection or a document within one of its subcollections? I have tried using the code provided in the Firebase documentation, but it only triggers when a docume ...

javascripttypescriptfirebasegoogle-cloud-functions

The typings for object properties in Typescript

I recently encountered a function call in my code: var myVar = myFunction({ property: 'prop', functionProperty() { console.log(this.property); }, functionProperty2() { this.functionProperty(); } }); I' ...

typescripttypescript-typings

Angular 2 component: Harnessing the power of boolean inputs

I am currently working on creating a reusable component for my application that may display a control button at times and hide it at others. My ideal scenario would involve utilizing the presence or absence of an attribute to determine whether the control ...

angular

"React's FC generic is one of its most versatile features

I'm currently working on a component that can render either a router Link or a Button based on the provided props. Here is the code snippet I have: import React from 'react'; import Button from '@material-ui/core/Button'; import { ...

reactjstypescript

Authorizer custom is not being triggered for websocket connection event

I'm currently working on implementing a custom authorizer for an API Gateway Websocket API. Below is my custom authorizer implementation using CDK: const authFunc = new lambda.Function(scope, utils.prefixed("WebsocketAuth"), { runtime: ...

typescriptaws-lambdawebsocketaws-api-gatewayaws-cdk

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

htmlcssdrop-down-menu

Bidirectional binding in Angular 2 Custom Directive

I've been working on a custom directive that automatically selects all options when the user chooses "All" from a dropdown. While I was able to get my custom directive to select all options, it doesn't update the model on the consuming component. ...

javascriptangularangularjs-directive

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3. ...

cssbootstrap-4

Disordered block elements

I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen. footer { text-align: center; background-color: grey; position: fixed; bottom: 0; width: 100 ...

htmlcss

Is there a way to assign "label 3" with the identical percentage as "label 1" on this particular form?

I'm currently using Bootstrap 4 for my project. I want to adjust "label 3" to have the same width as "label 1," while keeping the input width and the rest of the page intact (as shown in the code). Is this possible to achieve? Thank you. https://i ...

cssformstwitter-bootstrapbootstrap-4

Having trouble getting IcoMoon icons to display properly in Internet Explorer 8?

While using IcoMoon icons on my website, I have noticed that they function perfectly in all modern browsers except for Internet Explorer 7, where they do not display at all. In Internet Explorer 8, the icons show up as small boxes instead. The CSS code I a ...

cssinternet-explorer-8internet-explorer-7font-facehaslayout

Tips on making a forced call to `super.ngOnDestroy`

I am utilizing an abstract class to prevent redundant code for unsubscribing observables. Here is what it looks like: export abstract class SubscriptionManagmentDirective implements OnDestroy { componetDestroyed = new Subject<void>() constructor ...

angulartypescriptjasmineobservableabstract-class

The specified '<<custom component name>>' argument does not match the 'Type<<custom component name>>' parameter

I'm currently facing an error that indicates a type parameters mismatch, but I can't pinpoint where in the process it's happening. Argument of type 'ModalUserInfoComponent' is not assignable to parameter of type 'Type<Mo ...

typescriptbootstrap-modalangular7