admin管理员组文章数量:1332896
I'm using angular material 2 (material.io) and i'm trying to put the label of the md-radio-button above of the radio itself, like this:
Radio Buttons
The Docs say you can easy set the position to after or before. I'm using flex-layout (github/angular/flex-layout) too.
Here is my code:
<md-radio-group formControlName="id_customer_type" (change)="onChangeCustomerType($event.value)">
<md-radio-button type="radio" name="id_customer_type" value="1" [checked]="true"> Persona</md-radio-button>
<md-radio-button type="radio" name="id_customer_type" value="2"> Empresa</md-radio-button>
<md-radio-button type="radio" name="id_customer_type" value="3"> IoT/M2M</md-radio-button>
</md-radio-group>
If someone can help me, I'll be very greatful. Thanks!
I'm using angular material 2 (material.io) and i'm trying to put the label of the md-radio-button above of the radio itself, like this:
Radio Buttons
The Docs say you can easy set the position to after or before. I'm using flex-layout (github./angular/flex-layout) too.
Here is my code:
<md-radio-group formControlName="id_customer_type" (change)="onChangeCustomerType($event.value)">
<md-radio-button type="radio" name="id_customer_type" value="1" [checked]="true"> Persona</md-radio-button>
<md-radio-button type="radio" name="id_customer_type" value="2"> Empresa</md-radio-button>
<md-radio-button type="radio" name="id_customer_type" value="3"> IoT/M2M</md-radio-button>
</md-radio-group>
If someone can help me, I'll be very greatful. Thanks!
Share Improve this question edited Aug 22, 2017 at 20:32 Nehal 13.3k4 gold badges46 silver badges59 bronze badges asked Aug 22, 2017 at 18:30 Carlos RamartCarlos Ramart 131 gold badge1 silver badge4 bronze badges2 Answers
Reset to default 3If you look closer to the elements created by md-radio-group you will notice this:
<label class="mat-radio-label" for="md-radio-2-input">
<div class="mat-radio-container">
<div class="mat-radio-outer-circle"></div>
<div class="mat-radio-inner-circle"></div>
<div class="mat-radio-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLLabelElement]"
ng-reflect-centered="true" ng-reflect-disabled="false"></div>
</div>
<input class="mat-radio-input cdk-visually-hidden" type="radio" id="md-radio-2-input" name="md-radio-group-0">
<div class="mat-radio-label-content"><span style="display:none"> </span>Option 2</div>
</label>
.mat-radio-label has this CSS:
.mat-radio-label {
cursor: pointer;
display: inline-flex;
align-items: center;
white-space: nowrap;
vertical-align: middle;
}
Which basically is telling us that is using Flexbox to align its direct children (the radio button and the label). The default flex-direction is row, hence omitted. You can change it to column. By adding flex-direction: column-reverse you will put the label above.
This worked for me
:host /deep/ .mat-radio-label {
flex-direction: column-reverse;
.mat-radio-label-content {
padding: 0;
}
}
Using "@angular/material": "^6.4.7"
本文标签：
版权声明：本文标题：javascript - There is a way to positioning the label of radio-button above of the radio-button itself in angular material 2? - S 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742304758a2449695.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论