Hello i have a mat-radio-group with 2 mat-radio-buttons and they both have a border but i need to make it so they are clickable in all the parts of the border not just the small circle in the middle how do i do it?
#Radio-Button Clickable Arena
wet glade
timber ocean
usually the whole internal div is clickable, including related label, if any.
Provide a minimal reproduction of your issue.
wet glade
usually the whole internal div is clickable, including related label, if any.
Pr...
So the normal radio button has a circle and the text beside it,the text and the circle is clickable but i added border around it so if i try to click for example at the end if the border it doesnt work
timber ocean
That's not how you usually use material components.
But how did you add that border?
wet glade
That's not how you usually use material components.
But how did you add that bor...
By giving it a class and adding css
timber ocean
please can you provide minimal html and css?
mighty kestrel
Angular Material components are not designed to be altered like this. They are designed to look like Material Design and nothing else. If you have other design requirements, Angular Material is not the library to use, it will only cause you even more pain in the future.
wet glade
Angular Material components are not designed to be altered like this. They are d...
Ye so what do i do in this position?
mighty kestrel
- Make your app look like Material design and keep using Angular Material.
- Use a different UI framework.
timber ocean
If you don't show what you're trying to achieve is impossible to give to you any further suggestion.
wet glade
If you don't show what you're trying to achieve is impossible to give to you any...
i added the border but the only clickable thing is the circle and the text not the whole border
timber ocean
As already explained, there are not radios styled following Material guidelines.
You could play around altering their appearance goin gtotally out-of-spec to get what you want, but I highly discourage that.
wet glade
So what can i do
mighty kestrel
Abandon this design or Angular Material
wet glade
but i need to use the formcontrolname for example
mighty kestrel
formControlName is a directive from Angular's Reactive Forms. It is unrelated to Angular Material and can be used with plain normal radio buttons.