[Resolved] Slider height moves during transition

[Author]

Posts

[winyS]

I have created a testimonials slider with text and placed it with automated transition.
During the transition, the first testimonial disappears and the slider height changes to fit the next testimonial with less or more text.

This is really ennoying as if you are looking the content which is below the slider, you have a continues vertical move that prevent from reading !

I know also that fixing the slider height will solve the issue, but this is not really feasible when you are in responsive mode.

Can you provide a clear solution for this ?

[Christian Cox]

I know also that fixing the slider height will solve the issue, but this is not really feasible when you are in responsive mode.
A fixed height is the only solution, but you can use CSS and media queries to tweak things responsively. Can you explain the problem you're running into with a fixed height? I might be able to make some suggestions to help. For example, you can consider truncating text content and setting variable heights with a CSS solution like this:

.truncate {
  height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media all and (max-width: 768px)  {
  .truncate {
    height: 250px;
  }
}

@media all and (max-width: 992px) and (min-width: 768px) {
  .truncate {
    height: 300px;
  }
}

https://css-tricks.com/css-media-queries/

[winyS]

Thanks for your answer.
On this page: hidden link (scroll down to testimonial section) it works as I would like it to.
However this slider is not created with Toolset.
But it must be possible with Toolset as well.
Can you figure out how they did it?

[Christian Cox]

Yes I can see in this design there is some script that loads all the testimonial elements at the same time, then compares their heights and sets a fixed height on an element that is a container of all the testimonial elements. That container element always stays the same height, even if the testimonials inside it have different heights. It's a good solution for a non-AJAX display, but Toolset handles things differently and the same exact solution will not be possible.

Toolset's slider does not load all the results at first, it loads the results on-the-fly using AJAX for speed and performance reasons (unless you choose manual pagination with full page reloads instead of AJAX). It is not possible to determine maximum height of all the results because all the results have not been loaded when the first result must be displayed. Therefore, the best solution is a fixed-height, CSS-based truncation as I was explaining. You can set a fixed height with no overflow on a container element, yes, but if the content of one of your results is too tall for that container it will be cut off.

[winyS]

Thank you.