Настройте или удалите пространство между ионным рядом - PullRequest
Новая
       4

Настройте или удалите пространство между ионным рядом

0 голосов
/ 12 мая 2018

Я изучаю приложение Ionic. Я познакомился с Grid, однако я застрял в удалении / изменении пробелов между строками (строки № 2 и 3), как показано на следующем снимке экрана:

Screenshot

У меня есть следующий код в моем HTML: 

<ion-content padding>
    <ion-row>     
      <ion-label> I am good I do not want any space.</ion-label>
    </ion-row>
  <ion-row>
    <div >
      <div class="inner">
        <ion-label *ngIf="!inverse"  no-margin>1 USD = 67 INR</ion-label>
        <ion-label *ngIf="inverse" no-margin>1 INR = {{(1/67) | number }} USD </ion-label>
      </div>
      <button (click)="inverse=!inverse" ion-button clear class="iconWidth" color="dark">  <ion-icon name="swap" class="rotate"></ion-icon></button>
    </div>
  </ion-row>
<ion-row>
  <p>Can you help me to get rid of space between this row and above</p>
  <ion-label> Thanks</ion-label>
</ion-row>
</ion-content>

SCSS: 

page-home {

  .rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-bottom: 15px;
    }

  .inner{
    display: inline-block;
    width:70%;

    }
  .iconWidth{
    width:20%;
    }

}

Как настроить разрыв между строкой 2 и строкой 3?

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Использовать отрицательный margin-top

HTML 

<ion-row class="bottomRow">
  <p>Can you help me to get rid of space between this row and above</p>

1010 * СКС *

 .bottomRow
{
  margin-top: -20px;
}

Пример Stackblitz

0 голосов
/ 12 мая 2018

попробуйте использовать no-padding и no-margin, как это, и на других вы хотите отключить 

  <ion-row no-padding>
  <p no-margin>Can you help me to get rid of space between this row and above</p>
  <ion-label> Thanks</ion-label>

или 

 .inner{
  display: inline-block;
  width:70%;
  margin-bottom: 0px;

    }
...