Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interoperability of `EuiBottomBar` and `EuiNavDrawer` #3146

sqren opened this issue Mar 22, 2020 · 1 comment

Interoperability of `EuiBottomBar` and `EuiNavDrawer` #3146

sqren opened this issue Mar 22, 2020 · 1 comment


Copy link

@sqren sqren commented Mar 22, 2020

APM has started using EuiBottomBar and we’re running into an issue where it overlays on top of EuiNavDrawer.


Talking to @cchaos I can see why it happens (not every consumer of EuiBottomBar also uses EuiNavDrawer so EUI can’t simply offset by default).

Currently, the only way for us to fix this is by hardcoding margin-left: 48px; z-index: 9;. This doesn’t seem great because if EuiNavDrawer ever changes width this will break.

Would it be possible to have a prop to indicate that the consumer is using EuiNavDrawer - like <EuiBottomBar hasNavDrawer={true} />


This comment has been minimized.

Copy link

@cchaos cchaos commented Mar 23, 2020

@sqren Yeah, I know that it's hard to utilize the bottom bar in the current Kibana implementation alongside EuiNavDrawer.

The main issue with trying to manage this from the EUI side, is that there are actually multiple sizes of the EuiNavDrawer depending on it's state. So consuming applications will still need to know the collapsed and locked state of their nav drawer. Your screenshot is showing the "locked open" state, which is are far more than 48px.

This is why I've advocated that the consuming applications (Kibana) creates a global service like the Toast and Modal services that can then control the placement and extra margins when necessary in one place.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.