Overflows and React Slick

Vinay Kumar Dahiya — Wed, 15 Dec 2021 17:04:30 +0000

Cross posted from Archimydes blog

Why the post?

Here, I cover some of the problems I get stuck on, working as an Apprentice Software Engineer with Archimydes - A Software Engineering Guild. The issues that I discuss here might not be as complicated per se, but they are something you could get stuck on for a while (like I did). I get stuck on web-related issues, solve them, and share the experiences here so that you don't repeat my mistakes! If that sounds good, read on.
Happy reading! :-).

The Problem

I encountered this particular issue when I was using React Slick to make a carousel. We had specific images that were offset to the top, basically out of their original container elements, by design.

Figure 1: Original Issue

So when you have a similar design, you may encounter this issue.

The Diagnosis

Observing the dev tools clearly shows how the image is being cut on top, probably due to some overflow CSS property. (Chrome dev tool is your best friend when it comes to debugging web-related issues, spending some time getting used to it will be an excellent investment).

Figure 2: Highlighted image boundaries via dev tools

This happens because slick, by default, hides the overflow in all directions. The same is revealed via the chrome developer console:

Figure 3: Styles applied by react-slick

Easy Fix, is it though?

While exploring the HTML via the developer tools, I discovered that a class: slick-list is being applied to the main items in the carousel. So, how about writing some custom CSS in your global styles file, targeting the slick-list class ( discovered through chrome dev tools ) to make overflow visible.

This solved my problem, and the image was no longer cropped:

Figure 4: The result of setting overflow to visible via custom CSS

But since I made overflow visible, as a side effect, in another carousel, the content was creeping in from the previous and next slides.

Figure 5: Side effect of setting the overflow: visible

(And yes, I tried making just the overflow-y visible, it does not work for some reason).

The Actual Solution that worked

Sometimes the simplest and safest solution is so straightforward that it almost seems like a hack, and as you can probably guess, so is the case here.

The safest and most straightforward way to solve the problem, without impacting the rest of the application, is to just adjust the padding and margin on your original container and change the styles for content around it so that overall styling and placement don't get affected much.

Something like :

This would essentially expand the slick slider container ( the one with hidden overflow ) upward, and the overflowing content would fit inside this extra space comfortably, thus eliminating the problem.

The final result:

Figure 6: Solved problem (right) with highlighted margins (left)

Conclusion

This post is a classic example of how ignoring the simple solution that is right in front of you while looking for something that seems more like "not-a-hack" can lead to so much more trouble down the road.

Remember this, If it works and solves your problem, Simple is Good!

So that was it for this post. I hope you found this helpful and gained something from my short article. I would be glad if you could share your thoughts with me on Twitter v_dahiya_ or LinkedIn vinay-kumar-dahiya.

I look forward to your comments and suggestions.

Interested in joining the Guild?Join here.

Happy Coding!