accordion Bottom border is zero by default
See original GitHub issueBug description:
I am using simple Accordion form your package. I noticed bottom border for accordion is by default 0. All nested elements like cards inherit the same property so they also dont show bottom border
My HTML looks like this
<div class="mt-4">
<ngb-accordion #acc="ngbAccordion">
<ngb-panel title="{{category}}" *ngFor="let category of categories">
<ng-template ngbPanelContent>
<div class="container">
<div class="row">
<div class="col-md-4" *ngFor="let menuItem of menuItems">
<div class="card mb-5 box-shadow">
<img class="card-img-top" [src]="images[0]" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-plus-minus btn-number" (click)="onMinusClick(menuItem)">
<i class="fa fa-minus"></i>
</button>
</span>
<input [(ngModel)]="menuItem.quantity" class="form-control input-number" value="0" min="0" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-plus-minus btn-number" (click)="onPlusClick(menuItem)">
<i class="fa fa-plus"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
</ngb-accordion>
</div>
<div class="mt-4 mb-4 text-center">
<button class="btn btn-secondary" (click)="checkout()">Checkout</button>
</div>
When I load the page, the following pic shows the initial state
I tried to some tricks in Chrome debugger and found one way to get those absent borders back. Its visible in pic:
Angular: 5.2.9
ng-bootstrap: 1.1.2
Bootstrap: 4.1.0
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:12 (3 by maintainers)
Top Results From Across the Web
How do I remove bottom borders from accordion patterns?
Hmm super strange. Now the border doesn't show up until I click the actual accordion pattern and then it show on the bottom...
Read more >add border radius to lightning-accordion header using styling ...
I'm trying to add border-radius property to lightning-accordion-section header but the following syntax seems to work with background color ...
Read more >How to add a bottom border for a bootstrap accordion - Quora
Hello there, To do that, there is a CSS property called “ border-bottom ”. There you can set the color, width and style...
Read more >Borders · Bootstrap v5.2
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Read more >Borders - MUI System
Borders ; border · 1 · borderTop ; border · 0 · borderTop ; borderColor · 'primary.main' · borderColor ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Found a solution on my own. I was facing this issue, coupled with an other challenge: on the same page i am displaying a few different accordions, some might be 1 item long, some more. So I had to find a trick to select only the ones with one child. I got help from this article: https://css-tricks.com/almanac/selectors/o/only-child/
the rest is pretty straightforward, you just need to add a css rule:
.accordion div.card:only-child { border-bottom: 1px solid rgba(0, 0, 0, 0.125); border-radius: calc(0.25rem - 1px); }
This was not solved in 4.3. Bootstrap.css still contains