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.