when appendToBody is true styles are not applied to the dropdown menu

kostatsv commented 3 years ago

When appendToBody is true, the ul dropdown menu is appended to the body of the page without any IDs or custom classes. This makes it impossible to apply custom styles if there are multiple selects.

I am aware of the generated ID vs1__listbox but it changes on every page depending on the number of selects

mathiash98 commented 3 years ago

if you use the :calculatePosition prop you will be able to set classes and styles directly to the vue-select. That might solve your problem. https://vue-select.org/api/props.html#calculateposition

function withPopper(
  dropdownList: HTMLElement,
  component: { $refs: { toggle: Element | VirtualElement } },
  { width }: { width: number; top: number; left: number }
) {
  /**
   * We need to explicitly define the dropdown width since
   * it is usually inherited from the parent with CSS.
   */
  dropdownList.style.width = width.toString();
  dropdownList.style.zIndex = (500000).toString();
  dropdownList.classList.add("custom-class");
}

^^-> Something like this might work for you. I am not sure if you would need to use popper as well though in order to place the vue-select correctly

Edit: See https://github.com/sagalbot/vue-select/issues/1266#issuecomment-750016484 for related issue

hasanulsalah commented 1 month ago

Requirement:

I have been using v-select ( vue-select) for a vue project with version ( "vue-select": "^4.0.0-beta.6" ) .

Expected

vue-select ( v-select) should show all the dropdown lists for the user when there are options available.ie, user should be able to see the options with out scrolling to the bottom using keyboard or mouse.

Actual

Even if options are available , user was not able to see those without scrolling.

Then I tried with appendToBody feature. appendToBody props 'top', 'bottom' all were not working. But setting appendToBody true worked just fine, but the dropdown was displayed outside the expected div. for ex: We had this inside the modal and dropdown list was showing outside the modal. and there was no other fix. Then I found a fix without using appendToBody.

I was using v-select multiple.

<v-select multiple :uid="abc" v-model="yourArrayVariable"

here I added a uid for the dropdown ( 'abc'), which can be string or number. If we don't add a uid , v-select creates random uid for the dropdown list or elements.

then i added this code in the logic part:

if (yourArrayVariable.length) { let scrollLength = yourArrayVariable.length ; } if (scrollLength) { let element = document.getElementById( vsabc_option-${scrollLength - 1}; // here the abc you see here in 'vsabc' is the uid setTimeout(() => { element?.scrollIntoView({ behavior: "smooth", block: "end", inline: "end", }); }, 200); }

so without using appendToBody , there won't be any CSS or style issues that you are facing.

Create A uid for v-select
Watch your v-model and assign dropdown list to the variable
get the scroll Length ( total options list length ) and set a max-height for the vs_dropdown-menu, for example; if you set a max-height 165px, then by default 5 options will be displayed, and the rest we can see while scrolling.
let scrollLength = yourArrayVariable.length >= 5 ? 5 : yourArrayVariable.length; if there is scrollLength, then get the element by ID " vsabc_option-${scrollLength - 1} " this will give element which is either the fifth element or the last element in the list.
and then use a small timeout function of 200, and then use element?.scrollIntoView to scroll into particular option.

This way you don't need to use appendToBody and worry about the styles.

sagalbot / vue-select