Dropdown positioning problem

When component is not rendered in place, dropdown is appended to div with id ember-basic-dropdown-wormhole which is added to body. In my use case, body is not scrollable and a section of the body is scrollable in which power select is used. In this scenario when scrollable section is scrolled, trigger scrolls with the scrollable section, but dropdown doesn’t scroll along with trigger as it is positioned absolute(parent element is body). If select is at the bottom of the section and rendered in place, dropdown goes down(There is no auto positioning for render in place).

[evoactivity]

I’m posting in this old issue as none of the options work for me.

I have a panel that has an outlet, but my outlet is in a liquid-outlet so renderInPlace and destination both don’t work because the height of the outlet is defined by by liquid-fire. The results get cut off by the overflow and destination doesn’t work because it’s getting it’s offset from the window left and not from it’s containing element, as it exists in a liquid-outlet it has position:absolute; on the container, so I was going to force the no scroll using the css posted above for the wormhole container, but .is-dropdown-open is never added to the container.

Does anyone have a way forward?

[cibernox]

Yes, I’ve updated the docs showing how to customize this: https://ember-power-select.pagefrontapp.com/docs/the-list

I think that in your case since the app is not scrollable but some element inside, that could be fixed if instead of insertig the content of the select in a child of the body, you attach it to a child of the element of the element that has the scroll. Perhaps you need to make the element that contains the scroll position: relative, but I think that this might work

ENV['ember-basic-dropdown'] = {
  destination: 'power-select-render-target'
}

<div class="main-content-with-scroll">
  {{outlet}}
  <div id="power-select-render-target"></div>
</div>

You need to update to the very last version of the component to do that.

Makes sense?