Owlcarousel2: Auto height for multiple items

[shur]

There are some difficulties with autoHeight option to work with multiple visible items.
My questions a slightly different. How to make all items (not only visible) have the same height which equals the tallest of them.

I plan to use the script in a responsive template for RAXO module (http://www.raxo.org/)
so how to make the height to recalculate accordingly.

Do you plan to add this option, e.g. autoHeigh:all ?

[witrin]

Why not. Are you sure their is no possibility by using CSS? In the meanwhile I think this could be easily done with a event handler.

[witrin]

Related #353

[shur]

I just added a callback to the options of Owl Carousel:

        onRefresh: function () {
            owl.find('div.owl-item').height('');
        },
        onRefreshed: function () {
            owl.find('div.owl-item').height(owl.height());
        }

this solution works, now all items have the same height.

But I doubt that this solution is optimal.
Could you look, whether it is possible to simplify or improve this code???

[shur]

@witrin

Are you sure their is no possibility by using CSS?

I haven't found a universal CSS solution that will work in every situation and any browser. So I decided to use onRefreshed event to make all items of equal height. And then positioned the elements inside the item container with CSS.

Could you consider to implement this behavior as an option for this plugin?

[daviddeutsch]

This needs to be fixed either with a custom theme or with a flexbox solution down the road (v2.5 or later).

[marcing]

This can be achieved with CSS by applying flexbox to stage:

.own-carousel.owl-carousel .owl-stage
{
display: flex;
flex-direction: row;
}

.own-carousel.owl-carousel .owl-stage::after
{
display: none;
}

.own-carousel.owl-carousel .owl-item
{
float: none;
}

[behnamazimi]

I used flex to solve this issue:

 .owl-stage {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

above code for owl-stage and below for owl-item class:

.owl-item{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: auto !important;
}

I hope this reply help every body that have this issue.

[isalew]

@behnamazimi, thank you. That was simple and just what I needed!

[polodev]

Keep .owl-stage display flex. and all child will take all space by flex: 1

~css
.owl-stage {
display: flex;
}
.owl-item {
display: flex;
flex: 1;
}
~

[lerouxm]

.owl-stage {
   display: flex;
}
.owl-item {
   display: flex;
   flex: 1 0 auto;
}

Worked better for me as using flex: 1 leaded to 1px cropped first element.

[avtneyney]

@lerouxm, thank you for the flex: 1 0 auto; tip because it also fixes underflow (if this is the right word here) on the rightmost owl-item when owl-stage is displayed as flex container, this is something that's been bothering me for quite some time now.

[engineerdevi]

Set the autoHeight option of the owl-carousel to false. It stretches all small owl-items to the height of the tallest owl-item.
autoHeight: false

[abidiel]

@behnamazimi

Working in Owl Carousel v2.3.4, thanks

[ifelsegrandmaster]

@behnamazimi thank you.