CODEWITHSUNDEEP
popoverng-bootstrapbootstrap-popover
Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

How to give border to ngbpopover

I work in angular and I have opened a ngbpopover. But I want to give it's border as shown in design. Please help me if anyone know that how to do it.

enter image description here

Currently my design is like this as below. But I want it as per above image.

enter image description here

Upvotes: 5

Views: 1570

Answers (2)

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

This is perfect answer for my question...

    <div class="col text-option border-right-1-white" (click)="openTextColor()"
       [ngbPopover]="colorPopContent" [placement]="['bottom-left', 'top-left']"
         popoverClass="intro-text-color-popover" [autoClose]="'outside'">
    </div>

.intro-text-color-popover {
  background: #0f1934;
  border-radius: 8px;
  max-width: 400px;
  width: 400px;
  border: 2px solid #5d98e1;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom>.arrow::after {
  border-bottom-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::after,
.bs-popover-top>.arrow::after {
  border-top-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::before,
.bs-popover-bottom>.arrow::before {
  top: -14px;
  left: -3px !important;
  border-bottom-color: #5d98e1;
  left: calc(100% - 2px);
  border-width: 11px;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::before,
.bs-popover-top>.arrow::before {
  bottom: -13px;
  left: -3px;
  border-width: 11px;
  border-top-color: #5d98e1;
}

.intro-text-color-popover {
    width: 320px;
  }

This is my complete design.

enter image description here

Upvotes: 1

Mayur Kukadiya
Mayur Kukadiya

Reputation: 2747

I was found some hack for it. Hope it will help You. (add this classes into global style of ionic.)

 .my-custom-class {
    background: aliceblue;
    font-size: 125%;
    border: 2px solid black;
  }

  .my-custom-class .arrow:after,
  .my-custom-class .arrow:before {
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
  }

  .my-custom-class .arrow:after {
    top: -1px;
    border-color: aliceblue transparent transparent transparent;
    border-width: 10px;
  }

  .my-custom-class .arrow:before {
    top: 0px;
    left: calc(100% - 2px);
    border-color: black transparent transparent transparent;
    border-width: 12px;
  }

And apply same class to ngb popover like :

<button type="button" class="btn btn-outline-secondary" ngbPopover="Nice class!" popoverClass="my-custom-class"> Popover with custom class

Reference from CSS triangle custom border color

Upvotes: 1

Related Questions