react-beautiful-dnd and semantic-ui-css compatibility issue

[MohammedAl-Mahdawi]

Bug or feature request?

Bug

Expected behavior

I expect to be able to drag an item from the top of the list and drop it at the bottom of it when using semantic-ui-css.

Actual behavior

Cant drop the first item for example at the bottom of the list unless removing import "semantic-ui-css/semantic.min.css"; or make the body height auto which is set by semantic-ui-css to 100% and will affect the Semantic UI components and the entire website.

Steps to reproduce

Drag the first list item and drop it at the bottom of the list.

What version of React are you using?

My local React version is 16.6.1 and the demo version is 16.0.1

What version of react-beautiful-dnd are you running?

9.0.2

What browser are you using?

Google Chrome

Demo

https://codesandbox.io/s/5mo465r1l

[mwood23]

@MohammedAl-Mahdawi I've been using this with Semantic and agree that their CSS does mess with react-beautiful-dnd some. A work around I've been using is setting scroll on the list container. It throws a warning in the console, but I'm not sure why because there's only one scroll container that I can see. I've been using to drag between lists and rearrange lists with no problems at all.

Updated demo: https://codesandbox.io/s/5ylov12v3l

[MohammedAl-Mahdawi]

@mwood23 Thanks for your help, however, your workaround didn't work for me because I don't want to add a scrollbar to the list.

[alexreardon]

The issue is caused by overflow-x: hidden on the body. react-beautiful-dnd is treating this as a scroll container, even though it is not one.

So for your use case you can just remove that style. However, I also think we should update react-beautiful-dnd to not consider elements with overflow: hidden as scroll containers

We check overflowX and overflowY to see if their values are auto or scroll to see if it is a scroll container. However, changing overflow-x: hidden it forces overflow-y to auto.

https://codepen.io/alexreardon/pen/eQWpBR?editors=1112

[alexreardon]

https://www.w3.org/TR/css-overflow-3/#overflow-properties

Computed value:as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip

[alexreardon]

So by setting overflow-x it forces overflow-y to 'auto'

[alexreardon]

Also relevant: https://www.brunildo.org/test/Overflowxy2.html

[alexreardon]

I am not sure how we are going to distinguish between elements that only have overflow-: hidden with an overflow- auto on the other axis...

It is possible to have a scroll container that is overflow-x: hidden and overflow-y: auto that is a scroll container

It is also possible to have a scroll container that is overflow-x: hidden and overflow-y: auto that is NOT a scroll container

[alexreardon]

I am a bit stuck as I cannot figure out a way to distinguish between the two cases. For now just remove the overflow-x from the body body { overflow-x: visible; } while we try to find a more generic way...

[MohammedAl-Mahdawi]

Hi @alexreardon Thanks a lot for your help, I used body { overflow-x: visible; } hopefully it won't break anything in the project and I'll wait for your generic solution.

[alexreardon]

I am creating a more generic solution

…

On Thu, 15 Nov 2018 at 4:05 pm, Mohammed ***@***.***> wrote: Hi @alexreardon <https://github.com/alexreardon> Thanks a lot for your help, I used body { overflow-x: visible; } hopefully it won't break anything in the project and I'll wait for your generic solution. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#904 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7b8gFPv3FqeWgs6otKPkY0F4hteZks5uvPYVgaJpZM4YX9rY> .

[alexreardon]

Here is a new guide I have been writing: https://github.com/atlassian/react-beautiful-dnd/blob/61a3e210d47987e377cc4bbb1a69316311b6067f/docs/guides/how-we-detect-scroll-containers.md

[MohammedAl-Mahdawi]

@alexreardon using body { overflow-x: visible; } cause a horizontal scroll bar to appear so I removed it, also using body { overflow-y: scroll; } didn't solve the issue, I'll wait for the pull request to be merged then I'll test again.

[alexreardon]

This will be fixed by #929

[MohammedAl-Mahdawi]

@alexreardon Thank you