4

I am trying to use ngx-bootstrap in my Ionic 2 / Angular 2 app and for some reason the popover is not displaying correctly in my view:

<button
  placement="right"
  [outsideClick]="true"
  popover="this is a teseofnwifo ef efo efoih wefohwefo wef  h ioef  whefhweofihwoeht"
  [isOpen]="true"
  triggers="click"

  ion-button full outline 
  class="flex-col rounded box-shadow" 
  color="primary" 
  style="height:100%;font-size:16px;border-width:1px;" 
  (click)="goTo('new-client')" #1>
  <i class="fa fa-user-plus text-shadow" padding style="font-size: 150px;color:red;"></i>
  <span style="font-size:32px;text-transform:none;">New Client</span>
</button>

I don't believe my button styling should impact the popover as its rendered as a seperate component, but when the popover is displayed, both its width and height are set to 4px. I'm not sure where it's being set or if I'm missing some javascript somewhere..

app.module.ts

import { PopoverModule } from 'ngx-bootstrap/popover';

@NgModule({
  declarations: [...],
  imports: [
    PopoverModule.forRoot()
  ]
  ...
})

enter image description here

Jeremy Thomas
  • 6,240
  • 9
  • 47
  • 92

2 Answers2

5

I'm using Angular 9. My only way was to force change it globally using ng-deep

::ng-deep popover-container {
    max-width: 100% !important;
    background-color: black !important;
    color: white !important;
}

::ng-deep .bs-popover-bottom>.arrow::after {
    border-bottom-color: black !important;
}
Char
  • 2,073
  • 8
  • 28
  • 45
2

Set container="body", as in demo: https://valor-software.com/ngx-bootstrap/#/popover#container-body

If it will fix size then something is affecting popover style

valorkin
  • 1,329
  • 9
  • 20