Components: MatButtonToggle doesn't support width's change

[BobBDE]

Bug, feature request, or proposal:

Bug
I've noticed that the components MatButtonToggle and MatButtonToggleGroup don't support a different width than the default one. When we change the width of a button toogle the clickable zone of the button stay the same size and the text is not align in the center.

What is the expected behavior?

Be able to change the width of the MatButtonToggle and MatButtonToggleGroup and have the text centered.

What is the current behavior?

The clickable zone width is not changed when the width of the button toggle is changed.
The text is not center aligned.

What are the steps to reproduce?

Here is the plunker : http://plnkr.co/edit/oM6mG7vwQoisbJzx8GoL?p=preview
I added some CSS to highlight the problem of clickable zone. The red zone of the button is the clickable zone while the button is bigger than this.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I think the problem is in all the material version

Is there anything else we should know?

We can still correct this with some global CSS by changing the size of the div (child of button toggle) with the class : .mat-button-toggle-label-content
And the text alignment can be easily corrected by adding a 'text-align : center' to the button toggle element.

Thank you guys for your work, please continue like this !! :)

[seedy]

My workaround using @angular/flex-layout :

1. In a global sass file

.mat-button-toggle-label {
    flex: 1 1 100%;
    box-sizing: border-box;
    align-items: center;
    flex-direction: row;
    display: flex;

    .mat-button-toggle-label-content {
        text-align: center;
        flex: 1 1 100%;
    }
}

1. In my html

<mat-button-toggle-group>
  <mat-button-toggle *ngFor="let radio of _radios;" fxFlex fxLayoutAlign="center center">
    text
  </mat-button-toggle>
</mat-button-toggle-group>

1. Now I can set any flex size to the toggle group.

[tdhulster]

Based on @seedy's answer I used following:

mat-button-toggle-group {
  width: 100%;
}

mat-button-toggle {
  flex: 1 1 100%;
  box-sizing: border-box;
  align-items: center;
  flex-direction: row;
  display: flex;
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}