Dropdown boundary="window" fails within responsive table header

[michaelfelixmurphy]

I have a responsive table and a dropdown in one of its headers. If the table content is shorter than the dropdown, the dropdown is trapped inside the scrollbox of the table. I figured I could fix this easily with boundary="window" as I have done on other responsive tables to fix tooltips. But this does not seem to do anything. I tried to reproduce the issue using native Bootstrap and the issue does not reproduce (i.e. adding data-boundary="window" does indeed work using only Bootstrap).

Link to reproduce: https://codesandbox.io/s/goofy-joliot-v9b8f

Since this has boundary="window", I would expect the dropdown to breakout of the .table-responsive div.

Please let me know if you need any further information.

[tmorehouse]

Are you using the latest version of BootstrapVue?

It is working in this fiddle: https://jsfiddle.net/0r4acg7o/

Column "A" is using the default boundary (scrollParent), whule column "C" is using boundary="window"

[tmorehouse]

Ah, I placed the dropdowns in the <tbody>... but if placed into the <thead> I see the issue.

[michaelfelixmurphy]

Hi tmorehouse. Thanks for the quick response and the fiddle. I am indeed using the latest version.

The issue appears to be specific to the table header. I forked your fiddle to show this: https://jsfiddle.net/04xb891t/3/

Any ideas?

[tmorehouse]

We have style position: relative set for the header/footer rows... and I am trying to recall why we have that set in the custom SCSS.

Turning off that style, the dropdown works with boundary="window"

[tmorehouse]

postition: relative is needed on the header/footer cells for positioning the table header sort icons. But it appears to conflict with drop down for some reason

[michaelfelixmurphy]

Dropdown appears to require position: static when boundary is not set to the default.

Would adding thClass: 'position-static' to the relevant field object be the right workaround? Do you know if this will be addressed in a future release?

Thanks!

[tmorehouse]

Adding class position-static to the header cell works (except if you also have that column sortable - the sort icons will not show correctly)

[tmorehouse]

I'm not sure if we have a simple fix for this at the moment, due to the requirements of the sorting icons needing position relative (for absolute positioning)

[tmorehouse]

The other option for us would be to make the sort control icons inline-blocks rather than absolute positioning

[tmorehouse]

PR #3568 should now accommodate for this by removing the position: relative from teh header/footer cell CSS.

You can try it out at https://deploy-preview-3568--bootstrap-vue.netlify.com/ (and try in the playground)

[tmorehouse]

Version 2.0.0-rc.25 has been released.