bx--content applies extraneous left margin

[pheuter]

Not sure if this is intentional but the example doesn't appear to have this issue.

.bx--side-nav~.bx--content {
    margin-left: 3rem;
}

[metonym]

What screen width size is that?

Inspecting the CSS, the following rule kicks in past a certain breakpoint:

@media (max-width: 1056px) {
  .bx--side-nav~.bx--content {
    margin-left: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

[pheuter]

Thanks for the quick reply, I don't remember the screen width from the original screenshot, but I can say that rule never kicks in for me for widths narrower and wider than 1056px.

[pheuter]

Worth noting that I'm building the final carbon css file from carbon-components: 10.44.0 so it may be a difference between versions?

[metonym]

Interesting, the doc site is also using 10.44 though...

[DaleCam]

@pheuter i have been trying to build my own carbon css using postCss with not much luck - would you be able to let me know anything that might be able to assist me? I would be extremely grateful!

[pheuter]

@DaleCam No problem, here's a simple repro that's very similar to what I use to build the carbon css file: https://stackblitz.com/edit/node-fs38lv?file=styles.scss. npm run build should produce dist/carbon.css.

[pheuter]

@metonym Here's a repro of the margin-left issue: https://stackblitz.com/edit/node-sqgr3i?file=src/App.svelte

[metonym]

@pheuter Thank you taking the the time to create a repro. Indeed, I can confirm that the behavior is inconsistent with that of the docs.

Unfortunately, I made a mistake. It seems that the doc site manually unsets the margin past a certain breakpoint: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/_layout.svelte#L234

It's likely that the Svelte implementation is not 100% consistent with that of Carbon React. I'm trying to find the closest example in the Carbon React Storybook for the UI Shell + Navigation. It appears that the SideNav is a child of Header instead of a sibling.

Perhaps placing SideNav inside of Header could help?

[pheuter]

@metonym Making SideNav a child of Header seemed to fix the margin-left issue, and another side effect of that change is the Content no longer slides to the right when the sidenav is open, which also seems consistent with the React Storybook.

[DaleCam]

@pheuter - Thank you so much for your reply and the repro! My question was more for creating the css in the build pipeline in svelte + sapper. If you had any repros for the rollup/whatever.config to get it building the css i would be super grateful!

[pheuter]

@DaleCam Sorry, can't help you much there, my setup builds the css file ahead of time, not in the svelte build pipeline.

[DaleCam]

No problem! I appreciate you getting back to me!

---- On Wed, 13 Oct 2021 21:48:30 +0200 Mark Fayngersh @.***> wrote ----

https://github.com/DaleCam Sorry, can't help you much there, my setup builds the css file ahead of time, not in the svelte build pipeline.

— You are receiving this because you were mentioned. Reply to this email directly, https://github.com/carbon-design-system/carbon-components-svelte/issues/834#issuecomment-942663370, or https://github.com/notifications/unsubscribe-auth/ABBSIWCGZKS3UVGBWSKWWXDUGXPA5ANCNFSM5FEXFN2Q. Triage notifications on the go with GitHub Mobile for https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.