Ionic grid trouble

Question

<ion-grid>

  <ion-row wrap style="background-color: #25dfc3">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>

  <ion-row style="background-color: #ffffff;">
    <ion-col>Amethyst!</ion-col>
  </ion-row>

</ion-grid>

Is there any way to make my first row bigger than the second? I've been watching many tutorials but it seems that the flexbox solutions doesn't help me.

You need to provide a working code snippet that reproduce the issue. — Asons, Feb 05 '18 at 06:52

score 0 · Answer 1 · answered Feb 05 '18 at 09:23

Actually you can just add a height in the first row.

<ion-grid>

    <ion-row wrap style="background-color: #25dfc3; height: 300px;">
        <ion-col>
            <ion-slides pager>
                <ion-slide>
                    <h1>Slide 1</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 2</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 3</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 4</h1>
                </ion-slide>
            </ion-slides>
        </ion-col>
    </ion-row>

    <ion-row style="background-color: #ffffff;">
        <ion-col>Amethyst!</ion-col>
    </ion-row>

</ion-grid>

View it here: https://stackblitz.com/edit/ionic-rhdvzq

score 0 · Answer 2 · answered Feb 20 '18 at 05:52

i have solved the issue with flex like so:

<ion-grid>

  <ion-row class="top">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <div class="sprite">

            </div>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>


  <ion-row style="background-color: #ffffff;">
    <ion-col col-1></ion-col>
    <ion-col col-10>
        <button ion-button block (click)="login()"  >Inicia sesión con Facebook</button>
        <p></p>
        <button ion-button block  color="secondary" (click)="pushPage()" >Accesa con tu teléfono</button>
        <p></p>
        <a href="#">Términos y condiciones</a>
    </ion-col>
    <ion-col col-1></ion-col>
  </ion-row>

</ion-grid>

login-tutorial{
.top {
    flex: 4;
    background-color: #e8343b;
}

.button-block{
    margin-top: 14px;
}

a {
    text-align: center;
    font-size: .7em;

    float: left;
    margin-left: 30%;
    margin-top: 18%;

}

h1  {
    color: #fbb034;
}

.swiper-pagination-bullet-active {
    background: #fbb034;
    opacity: 1;
}

.sprite {
    width: 47.25px;
    height: 51px;

    /*margin-left: 42%;*/
    margin: auto;
    background-image: url("../../assets/imgs/babyL.png");

    animation: luigui 1s steps(11, end) infinite;
}

@keyframes luigui {
    from {
        background-position: 0px;
    }
    to{
        background-position: -549.25px;
    }
}
}

screenshot 1

Then I copied the same code to another app, however, the result is different. It seem like the flex is not working...

screenshot 2

Ionic grid trouble

2 Answers2