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
List group flush, first item still has top border #26961
Comments
It turns out, the SCSS is converted into this:
When I try this, it works as expected:
|
This is by design, though I imagine the docs could be clearer. When you place this in a |
This one caught me as well. In one component the border was there, and then for some unknown reason in another component it was gone! It makes sense now @mdo that you explained it. Thanks! For what it's worth, I'd be inclined to let people add the top border manually. It's not hard to just put a .border-top on the list group when you have content above it. |
This is confusing to me, too. The example at https://getbootstrap.com/docs/4.1/components/list-group/#flush clearly shows that adding classes of list-group and list-group-flush to an unordered list, even when it's not in a card (as it isn't in that example), should remove the first-child's top border and the last-child's bottom border. But it doesn't on a live site, it only removes the last-child's bottom border. I can't figure out why this is when the HTML is structurally the same. When I inspect the list-group-items in the docs, the first-child has this on it:
But on my site, that is not being added at all. Here's the exact code output by Drupal:
There is an unwanted border added to the top, but the last border is removed as intended. There doesn't seem to be any other classes that handle adding borders between list items like this when you don't want the surrounding borders. Edit: Okay, actually I get now why it's happening, because on my site the unordered list isn't the first-child of its parent element. Still, though, I think this should be more generic. |
I ran into this today as well. Just wanted to throw in my two cents that it the top border on the first li when the parent is not the first child feels wrong given the intent of the modifier class. That being said an easy workaround is to wrap the ul in a div, but that feels a little wasteful. |
PRs welcome to clarify the docs. |
I just fixed it with some custom CSS.
|
@milosa Yes, thanks. But my point here is to ask if this behavior is really expected. |
Here is another example DOM that causes this issue, using Angular 7, without cards:
|
When the .list-group-flush class is added in the List groups, the top line of the first element of the list is still displayed. When I look at the Boostrap.css document [Before] [After] |
Closed by #30497 |
The manual shows that the first item doesn't have a top border.
This piece is supposed to remove it.
But in this example it has a border:
https://codepen.io/anon/pen/NBgYNo
The text was updated successfully, but these errors were encountered: