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

Collapse/Accordion - CSS issue with only one card #28818

Closed
Schnatteraffe opened this issue May 24, 2019 · 5 comments
Closed

Collapse/Accordion - CSS issue with only one card #28818

Schnatteraffe opened this issue May 24, 2019 · 5 comments
Labels

Comments

@Schnatteraffe
Copy link

Hello
I've just used the accordion with cards and on some pages I need only one card. As you can see on the screenshot the CSS messes up the borders. I think it's because the one card is both the first and last child of the accordion.
Regards
Michael
bootstrap_accordion_issue

@Johann-S
Copy link
Member

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link, Bootstrap version, and specific browser and OS details.

This is an automated reply

@spma123
Copy link

spma123 commented May 29, 2019

Same issue here:
https://jsbin.com/luqafuciru/1/edit?html,output
bootstrap 4.3.1
tested on: chrome 74.0.3729.169, firefox 67.0 on windows 10

My quick and dirty fix was:

.accordion > .card:only-of-type {
    border: $card-border-width solid $card-border-color;
    @include border-radius($card-border-radius);
}

@ysds
Copy link
Contributor

ysds commented May 29, 2019

x-refs: #28780

@ysds ysds added css and removed awaiting-reply labels May 29, 2019
@spma123
Copy link

spma123 commented May 29, 2019

Bottom border already fixed in #28365, but top border isn't rounded.

Fix could be: .accordion > .card:last-of-type --> .accordion > .card:last-of-type:not(:first-of-type) in _card.scss

@MartijnCuppens
Copy link
Member

Fixed in the meanwhile: https://jsbin.com/weresipeje/edit?html,output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants