twbs/bootstrap

.list-group-flush within .card causes double border

Closed this issue · 7 comments

jabbett commented

Saw this locally when I upgraded to alpha 3, confirmed in the public documentation:

image

Seeing this in Chrome 51, Firefox 46, and Safari 9.1.2.

judetucker commented

+1 For me as well when migrating.

Also occurring in the plain list-in-a-card example.

screen shot 2016-07-28 at 10 45 16 am

Potentially this commit removed the different border when list groups are flush.
955e040#diff-cd8ec88dc7823a5c78f7111e37a78adbL37

Starsam80 commented

I thought that mdo fixed these with #19861 and #19885, but I guess he never fixed/reverted all of the changes he made.

hugofloss commented

Also occurring for me:

screen shot 2016-08-05 at 11 16 59

judetucker commented

Happy Friday! Since this seems to be a common problem and since the fix seems pretty benign, can this be added to the alpha.3.1 patch release?

  • 👍4
  • 😄1
judetucker commented

Hi @mdo, just wanted to follow up on this since its still present in the alpha.4 (http://v4-alpha.getbootstrap.com/components/card/#content-types)

Any chance this fix can catch the alpha.5 milestone?

  • 👍3
betorina commented

Temporary fix / monkey patch:

// Documentation example: Remove double borders
.card > .list-group > .list-group-item {
  border-left: 0;
  border-right: 0;
}
// Plain list card example: Remove also first + last border
.card > .list-group > .list-group-item {
  border-left: 0;
  border-right: 0;
  &:first-of-type {
    border-top: 0;
  }
  &:last-of-type {
    border-bottom: 0;
  }
}
jabbett commented

The above fix works when the .list-group is the only element within the .card. The following version allows for the .list-group to be combined with other elements within .card

.card > .list-group {
  > .list-group-item {
    border-left: 0;
    border-right: 0;
  }
  &:first-child .list-group-item:first-of-type {
    border-top: 0;
  }

  &:last-child .list-group-item:last-of-type {
    border-bottom: 0;
  }
}
  • 👍1