Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

.list-group-flush not working properly with Chrome 59

See original GitHub issue

The following code used to work just fine in all browsers:

<div class="card mx-3 my-3" style="width: 300px">
    <h5 class="card-header list-group-header text-muted">Card header</h5>
    <div class="selection list-group-flush">
        <span class="list-group-item list-group-item-action">List item A</span>
        <span class="list-group-item list-group-item-action">List item B</span>
        <span class="list-group-item list-group-item-action">List item C</span>
        <span class="list-group-item list-group-item-action">List item D</span>
    </div>
</div>

Since the Chrome 59 update however, it does not work properly. The borders between the list items are missing.

Result in Edge (expected result):

Result in Chrome 59:

jsfiddle: https://jsfiddle.net/6oggze6h/

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

caseyjholcommented, Jul 10, 2017

I’m experiencing this same issue - Chrome 59.0.3071.115 on Windows 10. Setting the border to a solid color or rgba(0, 0, 0, 1) makes it visible. Also, removing either border-left: 0 or border-right: 0 on .list-group-item makes the borders visible.

Here is a reduced test case: https://jsfiddle.net/caseyjhol/vpugbs2g/3/

0reactions

mcraptscommented, Jul 10, 2017

Issue isn’t appearing in beta version 60.0.3112.50 for me. So it appears to be a Chrome bug and not a Bootstrap issue.

Top Results From Across the Web

How to remove a list item border in bootstrap list group?

Problem : The current code you are trying is a descendant selector and will ... The bootstrap class .list-group-flush may also be used...

List group - Bootstrap

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any...

Day 12: Bootstrap 4 Lists Tutorial and Examples - BootstrapBay

list -group-flush class to the list. This will only keep the top borders top for the list items. HTML; SCSS. Result; Skip Results...

100 messages from Google Code

Your project notifications generated too many emails to send individually. Here are the subject lines of the emails you would have received:

Untitled

... block-gap,1.75rem)!important}.ext-mr-lg:not([style*=margin]){margin-right: ... radius:0}}.list-group-flush .list-group-item{border-right:0;border-left:0 ...