CODEWITHSUNDEEP
cssangularsassangular-materialangular11
ineedtoknow
ineedtoknow

Reputation: 1644

Align Radio Button Circle to the Top of the Container

I'm working in an Angular (v11) project that's using Material (v11).
I'm working on a page where users can select 1 of several options. These options are going to appear as mat-cards with lines of info. I want it to look (in simple terms) like this:
enter image description here

I'm using a radio-button-group to do this (https://material.angular.io/components/radio/overview).

I have a styling issue. I want The radio button circle to be aligned with the top of the card, like the picture above shows.
However, by default, the circle is floating in the middle on the entire container, so it looks like this:
enter image description here

Now, I could add a class to the radio button circle with a negative margin-top so it will be pushed upward to be aligned with the top of the mat-card. But my problem with that is the height of the mar-cards can be different.

Check out this stackblitz demo, it shows the option with the negative margin-top, but one of the mat-cards is bigger, so it's circle isn't aligned to the top.

Is there a better way to get the radio circle aligned to the top of the card?
Or just a better way to get the design I'm wanting in general?

Upvotes: 0

Views: 1068

Answers (1)

Sai Vamsi
Sai Vamsi

Reputation: 927

The mat-radio-button is aligned to center due to mat-radio-label. So to fix it according to your requirements, remove the css changes made for mat-radio-container and add this in css/scss:

::ng-deep .mat-radio-label {
  align-items: inherit!important;
}

I have edited your stackblitz and it's working. Please verify...

Upvotes: 1

Related Questions