Open MarkBFamFour opened 2 years ago
I think I found what the problem is:
<div
style={navbar ? undefined : 'overflow: hidden;'}
{...$$restProps}
class={classes}
in:collapseIn={{ horizontal }}
out:collapseOut|local={{ horizontal }}
on:introstart
on:introend
on:outrostart
on:outroend
on:introstart={onEntering}
on:introend={onEntered}
on:outrostart={onExiting}
on:outroend={onExited}
>
<slot />
</div>
So when you do not specify a style=
tag and are not using the Collapse as a navbar
it changes to style="overflow: hidden"
which cuts off the menu, as it's inside the <div></div>
and is technically overflowing.
If I remove that style from the Component source code then the dropdown it works okay.
I think when you specify style=""
when using the component the use of {...$$restProps}
adds a second style=
tag that overrides the first and wipes it out, meaning the overflow content is no longer being hidden.
So this isn't a bug maybe? Or it's a really weird corner-case?
Well at least we know now! :D
Hi,
I have encountered an issue with several instances of the Collapse component (Collapse, Accordion etc.) where, is the collapse is not open at the time the component is rendered, if it is subsequently shown, and Dropdown menus in it are truncated but the bottom of the element and the Dropdown 'auto-direction' popup mechanic (that for e.g. opens the menu upwards if it's at the bottom of the div) doesn't work.
If I convert the element to conventional 'bootstrap' code it works okay and when I show a collapse the menus work fine.
Example:
This results in the menu being opening 'down' and clipping off the lower part
If I change the
<Collapse {isOpen}>
to<Collapse {isOpen} style="background-color: lightblue">
it fixes the issue.What's happening?!
Small further investigation:
Even changing it to
<Collapse {isOpen} style="">
fixes it completely. It's like something in the styling is breaking or changing if I don't feed it a string?