Repository navigation
Double bottom border on collapsed cards #27108
Description
When collapsing cards (e.g. in an accordion), the header has a bottom border that is rendered on top of the bottom border of the card itself. It results in two borders to be rendered, which (especially for the last card with rounded edges) looks wrong:
Depending on the used browser and zoom settings there can even be a small gap between the two border lines.
#23839 improved the layout of cards as collapsible elements but didn't change the double bottom border.
I would expect that the border of the header is not shown for a collapsed card.
- Operating system: Windows 10
- Browser: Firefox 61.0.2
- Test case (taken from bootstrap documentation): http://jsbin.com/zomipatuci/edit?html,output
Activity
MelissaWeirick commentedon Aug 22, 2018
Use the {border-collapse: collapse;} property? Sorry first response so still trying to figure out how Github Works
royklutman commentedon Aug 26, 2018
I might have a fix for this, but I am not really sure if setting
overflow: hiddenon cards in an accordion is best practice, might also need some thorough review and testing:See this CodePen: https://codepen.io/anon/pen/JaGzNL?editors=1100#0
Maybe @andresgalante or @XhmikosR can shed some light on this case.
XhmikosR commentedon Aug 26, 2018
The patch above seems fine, but I haven't tested it, just the logic makes sense. Feel free to make a PR to discuss any proposed fixes.