CODEWITHSUNDEEP
angularng-bootstrap
ZAhmed
ZAhmed

Reputation: 1290

Angular 4 Popover bootstrap

How can I change the size of popover in bootstrap 4? I try in HTML but it do not work for me.

I am using: 

 <ng-template   #popContent  popoverClass="T">

Upvotes: 1

Views: 5417

Answers (2)

Yogesh Borkhade
Yogesh Borkhade

Reputation: 614

in your component.scss add : 

:host /deep/ .popover{
    left: 0% !important;
    width: 100% !important;
    max-width: 500px !important;
 }

it gives you warning but work perfectly.

point to remember : in component.ts file you can either use external css or style component

Upvotes: 0

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

You've got 2 options depending on your use-case:

  • if you want to change width of all your popovers than just customize Bootstrap's CSS by overriding Sass properties;
  • if you want to just change width of one instance you can target elements with the .popover class and override the max-width property.

Example:

@Component({
  selector: 'ngbd-popover-basic',
  templateUrl: 'src/popover-basic.html',
  styles: [`
    :host >>> .popover {
      max-width: 500px;
    }
  `]
})
export class NgbdPopoverBasic {
}

A fully working example in a plunker: http://plnkr.co/edit/XHK5lN6VZlp2vwlEsKBS?p=preview

Upvotes: 4

Related Questions