Cv-side-nav inconsistent render
See original GitHub issueDetailed description
Describe in detail the issue you’re having.
When using the cv-ui-shell/cv-side-nav.vue component, if I try to render it as a separated component, the layout crashes because one important class isn’t applied, which makes the side-nav get a spacing from top.
Is this a feature request (new component, new icon), a bug, or a general issue?
Bug
Is this issue related to a specific component?
Yes, cv-ui-shell/cv-side-nav.vue
What did you expect to happen? What happened instead? What would you like to see changed?
I expect that if I’m render this component inside a separated file, it still renders the same way as before (with a spacing from top)
What browser are you working in?
Chrome
What version of the Carbon Design System are you using?
“@carbon/vue”: “2.20.1” “carbon-components”: “10.9.2”
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
Steps to reproduce the issue
-
Create a component to render this storybook: http://vue.carbondesignsystem.com/?path=/story/components-cvuishell-header--side-nav-rail-with-header
-
Get all the code for cv-side-nav and put in a separated file (component) and use this new component
-
Check that the layout is broken, with the side-nav overlaying the header
Additional information
The problem is because of the class 'bx--side-nav--ux': isChildOfHeader,
not being applied on line 8.
This function below, is undefined when the cv-side-nav is written in a separated file. To find the cvHeader as parent, this function should be this.$parent.$parent.isCvHeader
. But maybe this isn’t the best approach for fix it.
isChildOfHeader() {
return this.$parent.isCvHeader;
},
Thank you
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (6 by maintainers)
Hmm interesting https://codepen.io/lee-chase/pen/xxbMPwY
@lee-chase yes! This was the way I created mine. I extracted only the menu for a new file and it worked. I’ll go with this approach as it seems changing the whole nav to a new file can lead to some bugs because of events and having one more tag there isn’t a problem.
Thank you Lee!