Overflows and React Slick
Tags: webdev, beginners, react
Published: 2021-12-15 17:04:30

> Cross posted from [Archimydes blog](https://archimydes.dev/fourthact/blog/overflows-and-react-slick)

<br/>

### Why the post?

> Here, I cover some of the problems I get stuck on, working as an Apprentice Software Engineer with <a href="https://archimydes.dev/" rel="noreferrer" target="_blank">Archimydes - A Software Engineering Guild</a>. 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! :-). 

<br/>

### 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.

<center>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tblh0tgb02p2v5hbwrcu.png" />
</center>
<center>Figure 1: Original Issue</center>
<br/>
So when you have a similar design, you may encounter this issue.
<br/>

### 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).

<center>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3dqoic2efdnnstknhy9.png" />
</center>
<center>Figure 2: Highlighted image boundaries via dev tools</center>
<br/>

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

<br/>

<center><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glxql89hh6h1w58q5z0l.png" /></center>
<center>Figure 3: Styles applied by react-slick</center>
<br/>

<br/>

### 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.

<br/>

<center>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hkd6x6nz11e3azkm203.png"/>
</center>

<br/>

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

<center>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xfyuv2caluxq160x9w4.png"/>
</center>
<center>Figure 4: The result of setting overflow to visible via custom CSS</center>
<br/>

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

<center><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsfjlowlmgu8xas3mbq9.png" /></center>
<center>Figure 5: Side effect of setting the overflow: visible</center>
<br/>

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


<br/>
<br/>

### 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.

<br/>

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.

<br/>

Something like :

<center>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3yihqon61tk18ratgf2.png" />
</center>

<br/>

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.

<br/>

The final result:

<br/>

<center><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75jk45tomr7zyk2mp1bk.png" /></center>
<center>Figure 6: Solved problem (right) with highlighted margins (left)</center>
<br/>

### 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.

<br/>

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

<br/>

<br/>

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 <a href ="https://twitter.com/v_dahiya_" target="_blank" rel="noreferrer">v_dahiya_</a> or LinkedIn <a href="https://www.linkedin.com/in/vinay-kumar-dahiya/" target="_blank" rel="noreferrer">vinay-kumar-dahiya</a>.

<br/>

I look forward to your comments and suggestions.

<br/>

Interested in joining the Guild?<a href="https://archimydes.dev/devjoin/" target="_blank"  rel="noreferrer">Join here</a>.

<br/>

 Happy Coding!