代码之家 › 专栏 › 技术社区 › Kumar

离子行显示同一行中的所有元素

ionic-framework cordova angular css html

Kumar · 技术社区 · 7 年前

如果单击反向图标(旋转掉期图标),我必须显示反向汇率。然而,我的倒置图标总是滑入新行。我怎样才能避免呢?我需要将其与行中的其他元素保持一致。我左边什么都没有。

  <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 ;
      }

我的SCS:

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  padding-right: 10px;
}

屏幕截图:

1 回复 | 直到 7 年前

Gautam Naik 7 年前

因为u说过,内容会调整大小,所以按钮没有足够的空间,因此会转到下一行。

此问题的解决方案将使用“分配固定到”按钮,将剩余内容分组并使用

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>

推荐文章

Zami Coskula · 未捕获引用错误:未定义L

7 年前

Muhammed Raheez PC · 构建应用程序时发生Ionic java构建错误

7 年前

beginner · Onesignal推送通知到特定类别

7 年前

jamesharvey · 如何使用*ngFor指令从Ionic 3(Cordova、Ionic 3、Angular 5)上的存储器中提取数据

7 年前

user2486706 · 我们可以直接将C++dll集成到ionic框架中吗

7 年前

jamesharvey · 我怎样才能让谷歌地图在一个div内只占据50%的高度?(爱奥尼亚3号,科尔多瓦)

7 年前

Kumar · 离子行显示同一行中的所有元素

7 年前

Raz · 如何从Cordova上的移动应用程序通过API从Google云平台获取数据?

7 年前

ntaso · Android上的Chrome:IndexedDB的配额突然几乎为0

7 年前

Thom · 我的cordova应用程序在M1 a1 mobile中不工作

7 年前