CODEWITHSUNDEEP
angulartypescriptpopoverng-bootstrapangular-bootstrap
hofshteyn
hofshteyn

Reputation: 1272

ng-bootstrap popover increases page width

I have a button at the right top corner of a page. I need to show a popover, but when I increase the width of its content, the page becomes larger and moves to the right, and the scroll bar appears at the bottom of the page. So I need to make the left side of the popover larger than the right side, with the triangle offset towards the right. But I don't know if it is posible...

Here are the relevant parts of the code:

hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styles: [`
    div {
      display: flex;
    }
    button {
      margin-left: auto;
    }
    .my-custom-class {
      width: 400px;
      background: aliceblue;
      font-size: 125%;
    }
    .my-custom-class .arrow::after {
      border-top-color: aliceblue;
    }
  `]
})
export class HelloComponent  {}

hello.component.html

<div>
    <button type="button" class="btn btn-outline-secondary" ngbPopover="Nice class!"
      popoverClass="my-custom-class" placement="bottom">
      Popover
    </button>
</div>

I also provided a working example on stackblitz: Example

Upvotes: 1

Views: 2439

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73761

You can use bottom-right placement to make sure that the right side of the popover is aligned with the right side of the button, and that the popover does not increase the page content width:

<button ... ngbPopover="Nice class!" placement="bottom-right">
  Popover
</button>

See this stackblitz for a demo.

Upvotes: 4

Redjon Sulaj
Redjon Sulaj

Reputation: 94

First of all I suggest you to work with inspectElement and use different measuring units except px. For example % , vh & vw (both used for responsible windows)

Next at your css styling work with .my-custom-class 

  .my-custom-class {
  width: 400px; //better change this to width:50% or 50 vw
  background: aliceblue;
  font-size: 125%;
  //also add these lines 
  left: 28px !important; //this is changeable to left:5% 
  position:absolute;
}

Upvotes: -1

Related Questions