Open dennemark opened 9 months ago
The issue arises in DndContext
. It uses Accessibility
which uses LiveRegion
that has the position:fixed
element.
Is there a reason that Accessibility is at the bottom of the elements? I would just move it up to the top or just give the Live Region a top: 0
style. That would move it to the top of my list and then double scrollbars would not appear.
<DndMonitorContext.Provider value={registerMonitorListener}>
<Accessibility
{...accessibility}
hiddenTextDescribedById={draggableDescribedById}
/>
<InternalContext.Provider value={internalContext}>
<PublicContext.Provider value={publicContext}>
<ActiveDraggableContext.Provider value={transform}>
{children}
</ActiveDraggableContext.Provider>
</PublicContext.Provider>
<RestoreFocus disabled={accessibility?.restoreFocus === false} />
</InternalContext.Provider>
{/* <Accessibility
{...accessibility}
hiddenTextDescribedById={draggableDescribedById}
/>*/}
</DndMonitorContext.Provider>
The other alternative that seems to work is giving a container as a portal to <DndContext accessibility={{ container }} />
But then it would be still good to know, if it is fine to move the live region to the top instead of the bottom of my dnd sortable list?
Hi, I have an
overflow: hidden
container around my sortable layers. Unfortunately dnd-kit places theposition: fixed
Live Region at the end of the sortable layers and this creates a second scrollbar, if the height of all layers is longer than the actual site. It seemsfixed
elements move out of theoverflow: hidden
context (https://stackoverflow.com/questions/11927583/hide-overflow-on-elements-with-fixed-position).When I check my css and just change the height of the Live Region from 1 to 0 the scrollbar is gone. Is there a reason the live region has a height of 1?
Related: https://github.com/clauderic/dnd-kit/issues/780 Weidly the scrollbars of 780 were fixed by introducing
fixed
in: https://github.com/clauderic/dnd-kit/pull/772