UI Shell wrong behavior #11087
UI Shell wrong behavior
#11087
Replies: 0 comments 1 reply
-
|
Here is my code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
<style>
main {
margin-block-start: 3.5rem;
margin-inline: 1rem;
border: 1px solid red;
height: 100%;
}
</style>
<script type="module"
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script>
<title>Document</title>
</head>
<body>
<cds-header >
<cds-header-menu-button
button-label-active="Close menu"
button-label-inactive="Open menu">
</cds-header-menu-button>
<cds-header-name href="javascript:void 0" prefix="TourBiz">[DEV]</cds-header-name>
<cds-header-nav menu-bar-label="IBM [Platform]">
<cds-header-nav-item href="javascript:void 0">Products</cds-header-nav-item>
<cds-header-nav-item href="javascript:void 0">Messages</cds-header-nav-item>
<cds-header-nav-item href="javascript:void 0">Organzation</cds-header-nav-item>
</cds-header-nav>
</cds-header>
<cds-side-nav collapse-mode="responsive">
<cds-side-nav-items>
<cds-side-nav-menu title="Main menu">
<cds-side-nav-menu-item href="#">First</cds-side-nav-menu-item>
<cds-side-nav-menu-item href="#">Second</cds-side-nav-menu-item>
<cds-side-nav-menu-item href="#">Third</cds-side-nav-menu-item>
</cds-side-nav-menu>
<cds-side-nav-divider></cds-side-nav-divider>
<cds-side-nav-link href="javascript:void(0)">Some Link</cds-side-nav-link>
<cds-side-nav-link href="javascript:void(0)">Other Link</cds-side-nav-link>
</cds-side-nav-items>
</cds-side-nav>
<main>
A. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Possimus natus ut facilis quidem ducimus
necessitatibus ad porro quas cum accusamus illum, quaerat,
ullam aspernatur veritatis ex nulla voluptate,
mollitia alias.
B. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Unde voluptatem beatae neque nihil amet,
fugiat libero molestias culpa. Perspiciatis dolores
assumenda distinctio quidem iste labore ipsum, sunt esse
impedit mollitia!
C. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Sunt vero eum iusto, assumenda et, omnis
veritatis dolore sed nobis a voluptatem veniam debitis
atque voluptate suscipit laborum sint architecto rerum.
</main>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello,
I am new to IBM Carbon. I try the WebComponent v2 (latest) version for my app skeleton and noticed that if I copy any UI Shell example from the docs pate it, and give it a try, the side navigation misbehaves: when I expand it enough (at width breakpoint 1055px, I think), the header links start to show , but the side navigation does not disappear! Is this a bug/bad documenttion?
The weird thing is that you do not see this behavior when you try this in the storybook ...
I tried to fix this with the below, but it does not work:
Beta Was this translation helpful? Give feedback.
All reactions