Visual glitch with navitems
Closed this issue · 7 comments
Displaced ellipsis options on the right hand side. I think it has something to do with the popover being within the navitem (flex positioning). No idea how to fix.
@YoungerMax @aodhfionn any ideas?
Try using position: absolute for the popover, that should prevent it from affecting any surrounding elements
Position absolute would make it hard to align with the relevant navitem though. We can try it but then we would have to use transform property.
That's fine, it's how I would have done it anyways. Just make the parent element use position: relative for it to work.
What's happening: the element with the navItemContent class takes up the entire width of the navItem until the popover appears. Once the popover appears, it's width fits the content(?) or changes nonetheless.
Why this happens: ???
Issue: float: right on the Icon in css caused the issue. Making the parent a flexbox and the icon have margin-left: auto to align instead of float resolves this.
Fixed in eaa629a