Angular bootstrap ngb-tabset add button to the rightside to align with tabs

Question

I am using ngb tabset for tabs in my angular application. Here is the code i am using.

<ngb-tabset activeId="delegate-status" #tabs="ngbTabset" [activeId]="activeTab">

  <ngb-tab title="Delegate status" id="tab-delegate-status">
    <ng-template ngbTabContent class="content-container">
      <delegate-status-report></delegate-status-report>
    </ng-template>
  </ngb-tab>

  <ngb-tab title="No show" id="tab-noshow">
    <ng-template ngbTabContent class="content-container">
      <noshow-report></noshow-report>
    </ng-template>
  </ngb-tab>

</ngb-tabset>

I would like to have some button for eg: Export To CSV, on the right side which aligns the tab. Can anyone help me how to style this to have a button on the right side of this tabs?

Thanks

marc_s · Accepted Answer · 2020-02-28 05:22:24Z

2

SOLUTION 1:

You should use ngbNav instead of tabset.ngbNav provides list of elements allow to put any element inside of it and functionality is as same as tabset.

For more info : https://ng-bootstrap.github.io/#/components/nav/overview

thanks to ngb-nav you can insert button element inside li tag and for position below css will work

button{
  position:absolute;
  right:15px;
}

Stackblitz : https://stackblitz.com/edit/angular-us155y-n7tr8e?file=index.html

SOLUTION 2

As you need to use ngb-tabset, I made button absolute to be aligned anywhere as wished again and added top:0 property to make it stick to the top. Added button element under </ngb-tabset>

button{
  position:absolute;
  right:15px;
  top:0;
}

Stackblitz : https://stackblitz.com/edit/angular-us155y-bilsj3?file=app/tabset-preventchange.html

edited Feb 28, 2020 at 5:22

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Feb 11, 2020 at 17:58

Timuçin Çiçek

1,6263 gold badges25 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mukil Deepthi Over a year ago

Thanks. But the requirement is to achieve the same using ngbtabset.

Timuçin Çiçek Over a year ago

@MukilDeepthi If it worked for you,could you mark this as answer?

birajad · Accepted Answer · 2020-04-29 17:47:40Z

0

if you add paragraph tag inside tabset you can add button inside the paragraph tag. You can refer to the html below

        <p>
          <button class="btn btn-outline-primary" type="button" name="button">Edit Profile</button>
        </p>

This is how my css looks like but you can change the css as per your requirement.

button {
   margin-top: -160px;
   right: 15px;
   border: none;
   background-color: green;
   color: white;
   height: 50px;
   position: absolute;
   border-radius: 0%;
}

answered Apr 29, 2020 at 17:47

birajad

5121 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular bootstrap ngb-tabset add button to the rightside to align with tabs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related