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

Border card-group doesn't work in a accordion collapse #26556

Closed
Jaapinator opened this issue May 22, 2018 · 7 comments
Closed

Border card-group doesn't work in a accordion collapse #26556

Jaapinator opened this issue May 22, 2018 · 7 comments

Comments

@Jaapinator
Copy link

I have no idea if it is my problem but when I use a card-group in a accordion collapse it doesn't show borders properly.
Version: bootstrap 4.1.1
Browsers: IE, Edge, Chrome, Opera, Firefox
Code: https://codepen.io/anon/pen/qYvLdN

@CodelineRed
Copy link

CodelineRed commented May 22, 2018

May be it is a bug here
Or accordion is not 100% compatible with card group.

@Gehanii
Copy link

Gehanii commented Jun 8, 2018

It affects any cards that might be used inside the accordion, which limits the accordion's utility somewhat. It appears that this is the result of the "fix" for the doubled-borders for the accordions (#23836).

@Gehanii
Copy link

Gehanii commented Jun 8, 2018

Wouldn't changing the rule from .accordion .card:first-of-type to .accordion > .card:first-of-type resolve both issues? It certainly looks like it is in dev for me but I also have rotten luck these days when I post something... :)

@linusbrolin
Copy link

Possibly related:
The bottom border is not visible when the accordion only has one child.
So this section:

.accordion {
  .card:first-of-type {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

should really be changed to:

.accordion {
  .card:first-of-type:not(:last-of-type) {
    border-bottom: 0;
  }
  .card:first-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

@zhulb001
Copy link

I noticed this also, I just took the accordion example from the documentation and deleted the two last cards and the first card does not have a bottom border.

@Ruffio
Copy link

Ruffio commented Jul 24, 2018

I'm also seeing this issue as I use single item accordion. I ended up with overruling by usage of !important

@fabswt
Copy link

fabswt commented Dec 4, 2018

Indeed, accordions with a single card do not display properly. They lose their round corners (top and bottom) and their bottom border:

Bootstrap 4.1 accordion bug

P.S.: using this fix for now, until @linusbrolin's fix makes it to the source code:

/** Temporary fix for Bootstrap accordion bug -- see https://github.com/twbs/bootstrap/issues/26556 **/
.accordion .card:only-of-type {
	border-radius: .25rem;
	border: 1px solid rgba(0,0,0,.125);
}

@mdo mdo added this to Inbox in v4.3 via automation Jan 6, 2019
@mdo mdo moved this from Inbox to Ready to merge in v4.3 Jan 6, 2019
@XhmikosR XhmikosR removed this from Ready to merge in v4.3 Jan 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants