ionic slide fixed at the center

user_14033696 0
Viewed 276

hi i try this code to build slider

    <ion-slide>
        <ion-row>
            <ion-col>
                <ion-card mode="ios">
                    <ion-card-header>
                        <ion-img src="https://abrito.ir/uloader/UFD/4%20(1).jpg"></ion-img>
                    </ion-card-header>
                    <ion-card-content>
                        Keep
                    </ion-card-content>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-slide>

but the problem is the slider content stick at the center of the page and the huge empty space is front of the ion cards

fullcode: https://paste.ubuntu.com/p/mZzJHcXc54/

enter image description here

ionic4 ionic-framework html javascript
1 Answers

I think you will achieve the same effect removing ion-row and ion-col and introducing a div with flex display. All in all, I think you should put ion-grid as the docs says.

Then,

Solution 1: Adding ion-grid

<ion-slide>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card mode="ios">
          <ion-card-header>
            <ion-img src="https://abrito.ir/uloader/UFD/4%20(1).jpg"></ion-img>
          </ion-card-header>
          <ion-card-content>
            Keep
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-slide>

Solution 2: Changing to DIV

<ion-slide>
  <div class="rowofcards">
    <ion-card mode="ios">
      <ion-card-header>
        <ion-img src="https://abrito.ir/uloader/UFD/4%20(1).jpg"></ion-img>
      </ion-card-header>
      <ion-card-content>
        Keep
      </ion-card-content>
    </ion-card>
  </div>
</ion-slide>

and in page.scss:

.rowofcards {
  display: flex;
}

.rowofcards > * {
  flex-grow: 1;
}

Note you should have to apply more styles to achieve what you need.

Also, why do you put an image in ion-card-header?

user_36564190
Related