UI Shell wrong behavior - Web Components. v2 latest #11089

hrstoyanov · 2023-11-02T18:54:53Z

hrstoyanov
Nov 2, 2023

Hello,
I am new to IBM Carbon. I am trying the WebComponent v2 (latest) version for my app skeleton and noticed that if I copy any UI Shell example from the docs the side navigation misbehaves: when I expand it enough (at width breakpoint 1055px, I think), the header links start to show (correctly) , but the side navigation does not disappear! Is this a bug/bad documentation?

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:

 @media (width > 1550) {
            cds-side-nav {
                display: none;
            }
            cds-side-nav-items {
                display: none;
            }
        }

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>

tw15egan · 2023-11-02T19:17:45Z

tw15egan
Nov 2, 2023

Seems like this is an issue with the web-components implementation. This repo is for the React implementation. Transferring your issue over there 👍🏻

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Shell wrong behavior - Web Components. v2 latest #11089

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

UI Shell wrong behavior - Web Components. v2 latest #11089

hrstoyanov Nov 2, 2023

Replies: 1 comment

tw15egan Nov 2, 2023

hrstoyanov
Nov 2, 2023

tw15egan
Nov 2, 2023