CODEWITHSUNDEEP
twitter-bootstrapangularionic-frameworkbootstrap-4ngx-bootstrap
Jeremy Thomas
Jeremy Thomas

Reputation: 6684

Ngx-Bootstrap popover not setting correct height or width

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

Upvotes: 4

Views: 8415

Answers (2)

Char
Char

Reputation: 2133

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;
}

Upvotes: 5

valorkin
valorkin

Reputation: 1339

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

Upvotes: 2

Related Questions