CODEWITHSUNDEEP
cssangularangular-material2
suresh
suresh

Reputation: 15

angular2 material md-radio vertical

How to make an angular 2 material md-radio button vertical and change and default colour. I tried this link and I was not able to make it display vertically

my code:- 

<md-radio-group  ng-model="data.group1" layout-align="start start">
    <md-radio-button ng-value="green" class="my-radio" *ngFor="let schedule of schedules" value={{schedule}} (click)="postSchedule(schedule)" ng-style="{'display':'list-item'}">{{schedule}}</md-radio-button>
</md-radio-group>

css:- 

md-radio-button ._md-container {
   top: 0;
   transform: translateY(0);
}

Upvotes: 1

Views: 1888

Answers (2)

Emmanuel
Emmanuel

Reputation: 14209

Cf deleted post on this page by Pengyy which works for me:

You can add a custom style as below for md-radio-group.

.radio-group {
  display: inline-flex;
  flex-direction: column;
}

Upvotes: 0

Kirubel
Kirubel

Reputation: 1627

You may have to try to use flex-box properties. Try below code

.my-radio {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex-box;
    flex-direction: column;
}

Upvotes: 1

Related Questions