0

I'm using tippy to create responsive (position-aware) dropdowns. I have the following options:

tippy(this.inputEl, {
  content: this.dropdown,
  allowHtml: true,
  trigger: 'manual',
  ...,
  placement: 'bottom-start',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        fallbackPlacements: ['bottom-end', 'bottom-start', 'top-end', 'top-start']
      }
    ]
  }
});

The problem is that the initial placement is incorrect on small screens. It shows the dropdown always on bottom-start. After scrolling, it renders the dropdown correctly.

I tired to call update on the popperInstance after I show the dropdown, but it didn't work.

Motassem Jalal
  • 1,254
  • 1
  • 22
  • 46

0 Answers0