'See more' popup tile or scroll bars instead of just showing more text in the same space

I’ve got a space on my website for the testimonial slider, but at the moment, some of the testimonials are too big for the space so they disappear off the bottom of the widget. There is the option to limit the number of lines included in the widget, but then the ‘see more’ button appears when there is too mucch text, and when you click on it, all that happens is that the whole text is shown, disappearing off the bottom of the widget, which defeats the object. It would be better if there could be scroll bars, or even better, a popup tile with the whole text when the text doesn’t fit the widget.

1 Like

@Antony_Wootten I’ve checked your website and see that the long reviews aren’t getting cut off:

Could you please specify the device you are using when the issue occurs?

Hi, thanks for getting back to me. There are 3 variants of my website for different sizes screens. You’re probably viewing the widest version, in which case, the reviews do fit without getting cropped, but in the variants for narrower screens / mobiles, they do get cropped, and the “see more” button is redundant. Please see the screenshot I attached to my original message. Alternatively, you can view the mobile version on your phone, or just click on the ‘windowed’ button and then make the window narrower until the site automatically switches to one of the narrower variants.

Antony Wootten
Website: www.antonywootten.co.uk
Facebook: @AWauthor
Mob: 07719 814429

1 Like

Hi @Antony_Wootten :wave:

I’ve forwarded your request to our devs. I’ll get back to you once any news come up :slightly_smiling_face:

I’ve talked to our devs and that your website is built on absolute positioning, so the only workaround is to add the scrollbar.

Please add this code to the Custom CSS field on the Style tab and let me know if you like what you see:

@media(max-width: 440px) {
  .swiper {
    overflow-y: scroll;
  }
}

Thanks very much. I can’t see that the CSS code has made any difference though. Is it supposed to display a scroll bar if the text overflows? It doesn’t…

1 Like

Reply #2: Also, I see from the examples on your website that when a viewer clicks on ‘see more’, the widgets automatically expands so that all text is shown, and the content on the page is automatically pushed down to make room for it, so nothing overlaps anything else. Am I missing something? How can I get that to happen on my website?

1 Like

Hi @Antony_Wootten :wave:

I am so sorry about that! We’ll double-check things, I’ll keep you updated :slightly_smiling_face:

That would be great. Thanks.

1 Like

Thank you for waiting!

Here is the revised code for adding the scroll:

@media (max-width: 480px) {
  .global-styles,
  .xr_noreset:has([class*='elfsight-app']) {
    overflow-y: auto !important;
  }
}

Please check it and let me know how it worked :slightly_smiling_face:

As for the automatic expansion when clicking on See More. unfortunately, this feature doesn’t work your website is built on absolute positioning.

Thus, the only workaround is to add the scrollbar.

Also, I’ve noticed that you’ve added the same Testimonials Slider widget 4 times, that’s why when the screen size changes, the text of the reviews overlaps each other:

To fix it, you need to remove 3 installation codes of your widget and leave only 1.

Hi Max,
Thanks for the code, but I’m still not seeing any scrollbars.
As for my website being built on absolute positioning, I do have the facility to make objects move when other objects are expanded. There’s nothing that causes it to happen live on the published site at the moment, but, in my editing software, the contents repositions itself when I put something in which is too large for the space. Is there any way I can harness that facility to do the same thing according to the size of the testimonial in your widget? My software is Xara Web Designer Pro X.

(Email #2) That’s weird! I’ve sorted it now - hadn’t realised that was happening! Thanks for pointing it out.

1 Like

Great!

If any further questions come up, we are always here for you :slightly_smiling_face: