Container/Drop-zone Mismatch

cheshireoctopus commented 6 years ago

Hello @kutlugsahin - thank you for maintaining this library.

Experiencing an issue with .smooth-dnd-container built from the <Container> component:

My code looks similar to:

<div className="outer" style={{ height: '74px'; padding: '12px' }}>
  <Container>
     ...
  </Container>
</div>

and the DOM output looks like (inline styles added):

<div class"outer" style="height: 74px; padding: 12px">
  <div class="smooth-dnd-container vertical" style="height: 0px"></div>
</div>

The resulting issue is that the outer container, despite having a height of 74px does not acknowledge droppable elements its bottom quarter.

Unsure if this is because .smooth-dnd-container is rendered with a height of 0px.

Droppable:

Non-Droppable:

Any advice would be appreciated. Thank you 👍

kutlugsahin commented 6 years ago

Hey @cheshireoctopus , The Container element does not expand to its parent element by default. If you want to adjust its sizes you can target .output .smooth-dnd-container by 'output' class or you can set Container's style explicitly.

jdevelopervimal commented 5 years ago

Hi, @kutlugsahin I'm also facing same problem, Drop zone has smaller size than Container Can you give a small example for extend size of Drop-Zone?

bryant988 commented 5 years ago

I've been able to solve this by adding inline style to adjust size.

<div className="outer" style={{ height: '74px'; padding: '12px' }}>
  <Container style={{ height: '100%', width: '100%' }}>
     ...
  </Container>
</div>

kutlugsahin / react-smooth-dnd

Container/Drop-zone Mismatch #24