如果点击了反转图标(旋转交换图标),我必须显示反转货币汇率。但是,我的倒置图标总是滑入换行符。我怎么能避免这种情况?我需要将其保持在与行中其他元素相同的行中。我左边什么都没有。
<ion-row>
<div col-7 offset-5 no-padding text-right>
<ion-label *ngIf="!showInverted" no-margin class="rate label-tx">1 {{transaction.SendCurrency}} = {{transaction.ExchangeRate | amountFormat}} {{transaction.PayoutCurrency }}</ion-label>
<ion-label *ngIf="showInverted" no-margin class="rate label-tx">1 {{transaction.PayoutCurrency}} = {{1/transaction.ExchangeRate | amountFormat}} {{transaction.SendCurrency }}</ion-label>
<button (click)="showInvertedRate()" ion-button clear color="dark"> <ion-icon name="swap" class="rotate90"></ion-icon></button>
</div>
</ion-row>
In my Ts file:
showInvertedRate()
{
this.showInverted = !this.showInverted ;
}
我的Scss:
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
padding-right: 10px;
}
答案 0 :(得分:1)
由于你说过,内容调整大小,按钮没有足够的空间,因此它会进入下一行。
解决方案将分配到按钮,分组剩余内容并使用
width:calc(100% - 30px);
用于剩余内容。
请注意,width:calc(100% - 30px)
还应考虑应用于按钮或内容的任何保证金。
.inner{
display:inline:block;
width:calc(100% - 30px); /*30px. should be same as button width */
}
.buuton{
width:30px;
}
<ion-row>
<div col-7 offset-5 no-padding text-right>
<div class="inner">
<ion-label *ngIf="!showInverted" no-margin class="rate label-tx">1 </ion-label>
<ion-label *ngIf="showInverted" no-margin class="rate label-tx">1 </ion-label>
</div>
<button (click)="showInvertedRate()" ion-button clear color="dark"> <ion-icon name="swap" class="rotate90"></ion-icon></button>
</div>
</ion-row>