Open panel covering controls

[HouseSitSearch]

Hello,

I'm trying to use the vue-treeselect control inside a dialog, using Quasar, but I'm having trouble creating my desired layout. The basic layout is like this...

OtherComponents . VueTreeSelect . ConfirmButton

I'd like to have the vue-treeselect always expanded, so my users can clearly see what to select. However, when the vue-treeselect is open in its "dropdown" format (using :alwaysOpen="true") the open "dropdown" section of the control covers the ConfirmButton, and I can see no way to prevent this from happening.

Additionally, the dialog I'm using does not seem to recognise the height of the control with the "dropdown" section open. So dialog does not expand to include the height of the "dropdown" section. Instead the vue-treeselect expands below the dialog, so you need to scroll to see the content, even though there is plenty of space left on the screen for the expanded content.

In simple terms, if the vue-treeselect component could be made to "consume" the space it expands into, then it would be much easier to control layouts, including having other controls below vue-treeselect, which would not then be hidden when it is expanded.

If an option could be added to make this layout possible I'd much appreciate it. If anyone has a .css fix/hack for this, then I would really appreciate that too.

I've added some images, which I hope explain the issue better. Notice how the expanded control both covers the Save button, and disappears off the bottom of the dialog

Thanks,

Mark

[z3d909]

Hi @HouseSitSearch try to set appendToBody option as true

[HouseSitSearch]

Thanks for trying to help, but if I do that, then the dropdown section is hidden behind the Quasar dialog, instead of being inside the dialog

[z3d909]

I think you can change z-index for vue-treeselect or your confirm box

[HouseSitSearch]

Changing the z-index to 9999, I can get the dropdown in front...

But as you can see the width is wrong, due the element's styles being z-index: 9999; width: 0px;

Increasing the width then makes it looks like this...

Unfortunately the buttons on the dialog are being covered, and the dropdown section isn't located correctly.

Also, the height of the drop down section has a maximum of 250px, so expanding "Europe" in the example below creates a scroll bar, when there is still a lot of room left on the screen.

[HouseSitSearch]

Is there no solution to this problem then? I was hoping there would be someway of forcing something like a relative position, instead of an absolute position for the drop down area.

[fbiagetti]

I have the first problem, and when i use appendToBody the code crash because the tree is on the modal.

Any have the same problem?

[EdmundoDelGusto]

Bit late to the party. Maybe add this to your stylesheet.

.vue-treeselect__menu-container {
  position: relative;
}
.vue-treeselect__menu {
  position: relative;
}

Here an example with absolute position:

Here two examples with a relative positioned menu:

Would be nice if there was an option to make the menu not float. @riophae