Slider Auto Height not working?

Design help General
#1

Hey I’ve got some content inside of a Div and the Div is set to auto on height. I put content inside and there’s no issues, Div scales as it should as content is added inside of it.

I want this Div inside of a slider now. So I add a slider and drag in my Div. The slider, the mask, and the Slide all have their height set to auto. I would have assumed the slider, mask, and slide height would adjust to fit the content inside of it right?

This isn’t happening. The bottom of my Div, about 20 px worth is being cut off. The slider isn’t sizing high enough to fit it.

Anybody know what’s going on?

Adding a video for reference: Dropbox - Screen Recording 2021-01-11 at 11.19.11 AM.mov - Simplify your life

2 Likes
#2

I fixed it. I found a post from 2016 where Vincent showed that the greyed out value on Webflow doesn’t always work. I had to type “Auto” into the height field and that fixed it.

3 Likes
#3

Hey Jack,

There’s another solution that worked for me, maybe not ideal but it does the job. I made all other slides that are not showing to 0px height so that the Mask will adapt to the actuals slide and here’s the solution:

.slider [aria-hidden=“true”] {
height: 0px;
}

Hope it helps

1 Like
#4

TYVM. You literally saved me ツ Couldn’t find a solution for months.

#5

Thank you! You saved me a lot of my time.

I leave here the code that worked for me:

<style>
    .w-slide [aria-hidden="true"] {
         height: 0px;
    }
</style>
#6

Just typed AUTO in height for the main slider element, and it looked like working! But then, when cms added a smaller text, the slider didn’t shrink back, and I even couldn’t find a way to center it.

Then I added the code above to the body tag of that page, and it started auto-adjusting to different sizes.