question-mark
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.

accordion Bottom border is zero by default

See original GitHub issue

Bug 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

card-bottom-border-absent

I tried to some tricks in Chrome debugger and found one way to get those absent borders back. Its visible in pic:

card-bottom-border-present

Angular: 5.2.9

ng-bootstrap: 1.1.2

Bootstrap: 4.1.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
JrmSKcommented, Jul 7, 2019

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); }

5reactions
mythcyraxcommented, Apr 2, 2019

This was not solved in 4.3. Bootstrap.css still contains

.accordion > .card:first-of-type {
  border-bottom: 0;
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found