CODEWITHSUNDEEP
htmlcssangularcordovaionic-framework
Kumar
Kumar

Reputation: 307

Ion row show all elements in same line

I have to show inverted currency rate in case inverse icon (rotated swap icon) is clicked. However my inverted icon always slides into newline. How I can I avoid that? I need to keep that in same line as with other elements in the row. I have nothing on the left side.

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

My Scss:

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

Screenshot: enter image description here

Upvotes: 0

Views: 1576

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9348

Since u said that, the content resizes, the button doesnt get enough space, hence it goes to next line.

The solution to this will be assign fixed with to button, group remaining content and use 

width:calc(100% - 30px);

for the remaing content.

Note that width:calc(100% - 30px) should also take into account any margin, applied to button or the content.

.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>

Upvotes: 1

Related Questions