0

I want to remove the padding on item inside ion-slide. By setting the background color, I've found that it must come from there, as shown in the pic: enter image description here

I want to remove the green zone.

<ion-content >
  <ion-slides style="background-color: #976914d0" >
  <ion-slide *ngFor="let channel of channels" style="background-color: #0c8831d0">
    <div class="flex-container">
        <br/>
        <h1 class="title-top"> {{channel.name}} </h1>
...

and what i've tried with scss so far:

.ios, .md {

page-home {
    ion-slide { 
        margin: 0 0 0 0 !important;
        padding: 0 0 0 0 !important; 
    }

    .flex-container {
        flex-basis:100% !important;
        overflow: auto;
        height: 100% !important;
        background-color: #3498db;

        //height: 100%;
        //display: flex; /* or inline-flex */
        flex:1;
        //align-content: space-between;
        justify-content: space-around;
        flex-direction: column;
        //flex-grow: 1;
        border: solid 5px #000000 ;
    }

[EDIT] I should have mentioned that in flex-container I can set height: 600px; and it makes larger item, but it is not portable. and height: 100% does nothing.

99tharun
  • 1,216
  • 3
  • 20
  • 36
Nitrof
  • 121
  • 1
  • 3
  • 15

3 Answers3

0

In flexbox the value should be flex-start for the align-self property.

Given your current configuration, start with this:

.flex-container {
    align-self: flex-start;
}
Sébastien
  • 11,860
  • 11
  • 58
  • 78
0

I found some work around but it is not perfect. It remove the space on top, but I'm still unable to set container size auto adjustable to windows... I overwrite some config on ion-slide. I saw another class that is nested in ion-slide; swiper-slide. I have not tried all of it config...

    ion-slides {
        height: auto !important;
      }

    .flex-container {
        //height: 100% !important;
        display: flex;
        flex-direction: column;
        height: 500px;
        justify-content: space-between;
        border: solid 5px #000000 ;

    }

[EDIT]finally got the right answer, add: 

.scroll-content {
display: flex;
flex-direction: column;

ion-slides {
    display: flex;
}
}
Nitrof
  • 121
  • 1
  • 3
  • 15
0
.slide-zoom {
    height: 100%
}

worked for me. Have a look at the Ionic Demo Source:

https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/slides/basic

Chris
  • 1