vue-typeahead-bootstrap icon indicating copy to clipboard operation
vue-typeahead-bootstrap copied to clipboard

dropdown is cut off in overflow containers

Open btm1 opened this issue 5 years ago • 5 comments

Needs ability to append the dropdown to the body so that it can be seen outside of overflow containers

btm1 avatar Jul 01 '20 01:07 btm1

Thanks for reporting the issue. I'm not sure I know how to replicate this issue. Can you provide some more details? Specifically, code recreating it?

mattzollinhofer avatar Jul 05 '20 17:07 mattzollinhofer

Waiting for additional feedback, closing for now -- happy to reopen if we have more info.

mattzollinhofer avatar Aug 07 '20 23:08 mattzollinhofer

Hi, it may not be the exact situation of the OP, but to replicate the issue quickly, I added the following style to a div container on your Examples page:

.theme-default-content content__default {
  max-height: 340px;
  overflow: auto;
  position: relative;
}

image

I hope it helps.

natharduini avatar Jan 02 '21 00:01 natharduini

I was able to reproduce this in my project by putting the typeahead into a modal, and giving it a list that makes the suggestions overflow the size of the modal.

I would suggest adding something like https://bootstrap-vue.org/docs/components/dropdown#boundary-constraint to control who element it's clipped by.

Morgul avatar Mar 20 '21 05:03 Morgul

@natharduini & @Morgul, thanks for the feedback and replication steps, that's super helpful!

I see how this is an issue and would welcome a fix for this. I'll definitely keep it on the list but if anyone has time to put a PR together that might get this moving a little faster.

mattzollinhofer avatar Apr 07 '21 11:04 mattzollinhofer