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

CSS Inconsistency LDS and SF Orgs: Page Headers #80

Open
KevSlashNull opened this issue Oct 6, 2020 · 3 comments
Open

CSS Inconsistency LDS and SF Orgs: Page Headers #80

KevSlashNull opened this issue Oct 6, 2020 · 3 comments

Comments

@KevSlashNull
Copy link

Describe the bug
In the LWC Local Dev Server, the page header does not render properly. This is probably related to nested styles originating from the outer Dev Server styles

To Reproduce
Steps to reproduce the behavior:

  1. Create an LWC Component: your-component (name not relevant)
<template>
  <div class="slds-page-header">
    <div class="slds-page-header__row">
      <div class="slds-page-header__col-title">
        <div class="slds-media">
          <div class="slds-media__body">
            <div class="slds-page-header__name">
              <div class="slds-page-header__name-title">
                <h1>
                  <span title="test title" class="slds-page-header__title slds-truncate">test
                    title</span>
                </h1>
              </div>
            </div>
            <p class="slds-page-header__name-meta">henlo fren</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  1. Start the Local Development Server
  2. Click on c-your-component
  3. See that the page header is not rendered properly

Expected behavior
image

The page header is rendered as detailed in the design spec: https://www.lightningdesignsystem.com/components/page-headers

Screenshots
image

The page header is not rendered correctly (mostly due to the missing border).

Desktop (please complete the following information):

  • macOS
  • Chrome
  • Version 85, 64-bit

Additional context

While trying to find a reason why the page header does not render correctly, I found this CSS rule applying to .slds-page-header.

.slds-card .slds-page-header, .slds-tabs_card .slds-page-header {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: .25rem;
}

As I’m not using cards it is caused by the Dev Server component container having a .slds-card class.

a screenshot of the chrome webtools. it shows that one component, which is part of the dev server, has an slds card class.

@stale
Copy link

stale bot commented Oct 13, 2020

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

@stale stale bot added the type:bug-p3 label Oct 13, 2020
@git2gus
Copy link

git2gus bot commented Oct 13, 2020

This issue has been linked to a new work item: W-8208662

@davehahn
Copy link

Any word on this, it is affecting me in may different senarios and just want the page header rendered correctly

@stale stale bot removed the type:bug-p3 label Jul 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants