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.

Sign up for GitHub

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

Jump to bottom

Incorrect borders with .list-group-flush.list-group-horizontal #39150

Open
3 tasks done
fulldecent opened this issue Sep 5, 2023 · 5 comments · May be fixed by #39513
Open
3 tasks done

Incorrect borders with .list-group-flush.list-group-horizontal #39150

fulldecent opened this issue Sep 5, 2023 · 5 comments · May be fixed by #39513
Labels
confirmed css v5

Comments

@fulldecent
Copy link
Contributor

fulldecent commented Sep 5, 2023 •
edited by julien-deramond

Prerequisites

Describe the issue

When using .list-group-flush and .list-group-horizontal on the same list group you get:

Screenshot 2023-09-05 at 15 56 33

But was expecting:

Screenshot 2023-09-05 at 15 56 33 copy

Documentation seems to say that this is possible:

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

I have seen another issue about putting a list group IN a list group. But that is not what is being reported here.

Workaround (how I made the second screenshot) is to add .border-0 on each .list-group-item

Reduced test cases

    <!-- a card with a link list group -->
    <div class="card" style="width: 18rem;">
      <div class="card-header">
        Featured
      </div>
      <div class="list-group list-group-flush list-group-horizontal">
        <a href="#" class="list-group-item list-group-item-action">Certificates</a>
        <a href="#" class="list-group-item list-group-item-action">Products</a>
        <a href="#" class="list-group-item list-group-item-action">AHA</a>
      </div>
    </div>

    <hr>

    <!-- a card with a link list group -->
    <div class="card" style="width: 18rem;">
      <div class="card-header">
        Featured
      </div>
      <div class="list-group list-group-flush list-group-horizontal">
        <a href="#" class="list-group-item list-group-item-action border-0">Certificates</a>
        <a href="#" class="list-group-item list-group-item-action border-0">Products</a>
        <a href="#" class="list-group-item list-group-item-action border-0">AHA</a>
      </div>
    </div>

Edit: CodePen created by @julien-deramond: https://codepen.io/julien-deramond/pen/rNoWJxg

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

5.3.1
@julien-deramond
Copy link
Member

Thanks for reporting this issue @fulldecent.
I can see that even without integrating the horizontal flush list group into the card, there's an issue with borders:

<div class="list-group list-group-flush list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

Here's a CodePen showing the issue initially reported and the one I saw while testing it: https://codepen.io/julien-deramond/pen/rNoWJxg

@fulldecent
Copy link
Contributor Author

Aha! Thank you, good minimizing!

Luciferxgkp pushed a commit to Luciferxgkp/bootstrap that referenced this issue Sep 16, 2023
twbs#39150 : fix incorrect borders in list-group-horizontal
8d9b473
This was referenced Sep 16, 2023
Closed
Closed
@WOLFRIEND WOLFRIEND linked a pull request Dec 19, 2023 that will close this issue
Open
10 tasks
@WOLFRIEND
Copy link

WOLFRIEND commented Dec 19, 2023 •
edited

@julien-deramond @fulldecent

Hey, guys.
I think I've found a solution to fix it and created a pull request: #39513.
For me, it works well, I checked separately only with a group list and inside a card component as well. I relied on how a vertical group list works. A vertical list, having the .list-group-flush class, has only bottom borders. Accordingly, a horizontal list with this class will have only the right-side frames.
image

@julien-deramond Could, you, check, please?
Thanks.

@WOLFRIEND
Copy link

I messed a bit with the commits, so if necessary, I can create a new pull request where I can clean everything up.

@julien-deramond
Copy link
Member

@WOLFRIEND I think that's OK, we change the message commit in the end and squash everything. If the final changes in the PR are OK, there's no need to clean it up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed css v5
Projects
v5.4.0
Status: Review in progress
Milestone
No milestone
3 participants
@fulldecent @julien-deramond @WOLFRIEND