Skip to content

Details summary margin appears to be wrong #1995

@facelessuser

Description

@facelessuser

I checked that...

  • ... the documentation does not mention anything about my problem
  • ... the problem doesn't occur with the default MkDocs template
  • ... the problem is not in any of my customizations (CSS, JS, template)
  • ... there are no open or closed issues that are related to my problem

Description

It appears the margin for summary is incorrect. It appears to use

.md-typeset summary {
    margin: 0 -0.6rem 0 -0.8rem;
}

But should use:

.md-typeset summary {
    margin: 0 -0.6rem 0 -0.6rem;
}

detail-bug

The problem doesn't appear until you try to override the background color of the summary. The above change does not affect the visual appearance of the base style, which seems to suggest that it is a quirk due to when the style is applied.

To demonstrate that this is not related to my site's custom styling, I've demonstrated that it occurs
on Materials official docs with a simple CSS change:

Screen Shot 2020-10-16 at 11 18 05 AM

I have replicated this on both Chrome and Firefox. I have not tried others yet.

Expected behavior

Changing the summary background should not make the left details border disappear.

Actual behavior

Summary background changes should not cause the left detail's border to disappear.

Steps to reproduce the bug

See description

Package versions

  • Python: 3.8
  • MkDocs: Latest
  • Material: 6.0

System information

  • OS: macOS
  • Browser: Firefox and Chrome, maybe more.

Metadata

Metadata

Assignees

No one assigned

    Labels

    change requestIssue requests a new feature or improvementresolvedIssue is resolved, yet unreleased if open

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions