Slide Box occupy Full size of content inside Modal

Hi Guys,

Is there some CSS styling to make the slide box with ‘cards on each slide’ to fill the size of “content” on a Modal responsive way?

  <ion-content class="has-header greyBackground" scroll="true" has-bouncing="false" padding="true">
        <ion-slide-box>
<ion-slide ng-repeat="slideData in slideShow">
           <div class="list card">
                    <div class="item {{slideData.bcolor}} item-body cardList">
                    </div>
                </div>
            </ion-slide>
        </ion-slide-box>
    </ion-content>

Red colored element is the card inside a slidebox And, I need it to occupy the content (grey) responsive-way
This is the snap of present output:
image

This is the snap of desired output:
image

The desired output was created by explicitly setting height of card inside slidebox to {height:400px;}
Can it be done responsive-design way?

Thanks in advance!! :smile:

Setting { height: 100% } instead should get you what you want?

That doesn’t work when I did styling of height on card inside slidebox.
And,the height of slide inside is default height:100%

Is there some other workaround please?
@mhartington

Hows this

@mhartington ‘padding-top’ of .slider-slide just shifted the card down on the slide but still the card /slide doesn’t fill the content space.
I played a bit with flexbox but it doesn’t work .Maybe I’m doing it wrong

So you want to set the car inside the slide to fill 100%?

Hows this.

1 Like

@mhartington Just awesome!!! :smile: It works perfect :wink:
Thanks a ton! Thumbs up for Ionic Forum support.!

Thanks so much. Always available for help us.