I have just started using the Angular Material theme within my Angular app.
I make use of some radio buttons but want to style them so that they are smaller than usual. I can style the text labels but I am struggling to style the actual buttons themselves (the circles).
So for now, I have
<mat-radio-group class="smallRadio">
<mat-radio-button value="1">Option 1</mat-radio-button>
<mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>
How should I go about that?
Try this,
Default radius is 20px
we are setting it to 10px
here
:host ::ng-deep .mat-radio-container{
height: 10px;
width: 10px;
}
:host ::ng-deep .mat-radio-outer-circle{
height: 10px;
width: 10px;
}
:host ::ng-deep .mat-radio-inner-circle{
height: 10px;
width: 10px;
}
:host ::ng-deep .mat-radio-button .mat-radio-ripple{
height: 20px; /*double of your required circle radius*/
width: 20px; /*double of your required circle radius*/
left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
}
Without using ::ng-deep
Turn off encapsulation of your component inside which you use the custom radio.
You can do this by
import {Component,ViewEncapsulation} from '@angular/core';
@Component({
selector: 'example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}
Wrap the component you want to style in a custom class.So it wont affect any other radio components.
In the above question its already wrapped with smallRadio
class
.smallRadio .mat-radio-container{
height: 10px;
width: 10px;
}
.smallRadio .mat-radio-outer-circle{
height: 10px;
width: 10px;
}
.smallRadio .mat-radio-inner-circle{
height: 10px;
width: 10px;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
height: 20px;
width: 20px;
left: calc(50% - 10px);
top: calc(50% - 10px);
}
You can add these css in global stylesheet without turning off view encapsulation. But more elegant method is the above one