Hello,
I am trying to embed a ‘ion-card’ in a ‘ion-slides’, but face issues with the width in portrait-mode. Not using the ion-slides works fine, but as soon as I wrap it in an ‘ion-slides’ the width seems to be fixed in landscape-size in portrait-mode. I have included images below the html-codes.
Here is the code for just the card:
<ion-header>
<ion-navbar>
<ion-title style="text-align:center;">Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="tutorial-page">
<ion-card>
<ion-card-content>
<ion-card-title style="color:#000000;text-align:center;padding-top:10px; font-size: 24px; font-weight: bold;">
Title
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-content>
Which looks like this. Which is correct.
But once its wrapped in a ion-slides the width goes out of bounds. Setting width in px or 100% of ion-slides
, ion-slide
, ion-card
doesn’t work or forcing portrait-mode doesn’t work. Code here:
<ion-header>
<ion-navbar>
<ion-title style="text-align:center;">Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="tutorial-page">
<ion-slides>
<ion-slide>
<ion-card>
<ion-card-content>
<ion-card-title style="color:#000000;text-align:center;padding-top:10px; font-size: 24px; font-weight: bold;">
Title
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
Results here.
Here is the css. It is from the the example preview-app:
.tutorial-page {
.toolbar-background {
background: #fff;
border-color: transparent;
}
.slide-zoom {
width: 100%;
height: 100%;
}
.slide-title {
margin-top: 2.8rem;
}
.slide-image {
max-height: 50%;
max-width: 60%;
margin: 18px 0;
}
b {
font-weight: 500;
}
p {
padding: 0 40px;
font-size: 14px;
line-height: 1.5;
color: #60646B;
b {
color: #000000;
}
}
}
NOTE: If I create a new app and try it sometimes it works, sometimes it doesnt and I have no clue what breaks the layout-constraint…
Appreciate any help,
Andre