react-smooth-dnd
react-smooth-dnd copied to clipboard
Container/Drop-zone Mismatch
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 👍
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.
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?
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>