Skip to content

Buttons in accordion inherit wrong box-sizing #1204

@mfranzke

Description

@mfranzke

I'm not really sure how inheritance works in the browser here, but due to the * {box-sizing: inherit;} rule, all the content inside a DB Accordion gets box-sizing: content-box (from the details element default value, apparently). Because .elm-button has a min-height of 2.75rem and padding, this causes them to grow beyond their normal size inside an accordion (because content-box means padding gets added to the height).

Setting box-sizing: border-box on the details tag does not solve this issue. It only gets inherited into the button if it's set on a wrapping container (div).

more information on the problem:
https://kittygiraudel.com/2021/08/23/shadow-roots-and-inheritance/ & https://stackoverflow.com/questions/75347448/box-sizing-not-inherited-through-details-element

Adapted by db-ui/core#494

Metadata

Metadata

Assignees

Labels

🐛bugSomething isn't working

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions