javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(slides): swiper container should take up 100% height

Browse Source 
closes #14771
This commit is contained in:
Brandy Carney
2018-07-17 18:05:11 -04:00
parent 857b42d47a
commit 1d201ec468
2 changed files with 5 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/slides/slides.scss
View File

@ -8,6 +8,10 @@
display: block; display: block;
} }
.swiper-container {
height: 100%;
}
// Pagination Bullets // Pagination Bullets
// -------------------------------------------------- // --------------------------------------------------

9
core/src/components/slides/test/app-intro/index.html
View File

@ -10,14 +10,11 @@
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css"> <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
<style> <style>
.scroll-inner, ion-slides {
.slides,
.swiper-container {
height: 100%; height: 100%;
} }
.swiper-slide { .swiper-slide {
display: flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -25,13 +22,11 @@
.swiper-slide img { .swiper-slide img {
max-width: 300px; max-width: 300px;
} }
</style> </style>
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
@ -44,7 +39,6 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-slides class="slides"> <ion-slides class="slides">
<ion-slide> <ion-slide>
<img src="https://images.unsplash.com/photo-1490718687940-0ecadf414600?auto=format&fit=crop&w=1352&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" <img src="https://images.unsplash.com/photo-1490718687940-0ecadf414600?auto=format&fit=crop&w=1352&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
class="slide-image" /> class="slide-image" />
@ -92,7 +86,6 @@
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
</ion-content> </ion-content>
</ion-app> </ion-app>
<script> <script>
const slides = document.querySelector('.slides') const slides = document.querySelector('.slides')