Bring to the front

[xereda]

Bring to the front

How do I leave the component above all other layers?

Observe the illustration below. The vue-multiselect should, in this case, stand on top of all other screen elements. In fact, it should always stay on top of the other screen elements. I think this should be a standard match.

How do you solve this?

Thanks a lot for the help.

[shentao]

Well, this isn’t a problem related to staying above other elements. It happens because your container styles have the overflow property set to auto. You could probably change it to visible and it should work then :) Without showing the scrollbar.

[xereda]

Okay, but I want multiselect to be over the footer of the modal component of Bulma css.

[shentao]

Then do the change that I suggested. Otherwise, it won’t be possible. It’s a problem of the container – you can’t get outside of it with anything you have inside. Not just multiselect.

[xereda]

<template lang="html">
  <transition name="fade">
    <div id="modal" class="modal is-active">
      <div class="modal-background"></div>
      <div class="modal-card custom">
        <header class="modal-card-head">
          <!-- Here are the title -->
        </header>
        <section class="modal-card-body">
          <form>
            <div class="columns is-multiline">
              <div class="column is-3">
                <label class="label">Cidade</label>
                <!-- Within this component is the multiselect. -->
                <dm-form-select @event="getValueField" field-name="city"></dm-form-select>
            </div>
          </div>
        </form>
      </section>
      <footer class="modal-card-foot">
      <!-- Here are the buttons -->
      </footer>
    </div>
  </div>
  </transition>
</template>

In which class (Bulma CSS) do you think it is more effective for me to apply the change? Notice the html above.

dm-form-select = Contains its component.

[shentao]

I would say try changing this class modal-card-body. And if it doesn’t work, try modal-card custom.

[xereda]

i tried:

  .modal-card {
    overflow: auto !important;
  }

  .modal-card {
    overflow: auto !important;
    z-index: 1 !important;
  }

  .modal-card-body {
    overflow: auto !important;
  }

  .modal-card-foot {
    overflow: auto !important;
  }

But I was not successful.

[shentao]

You have to change it to visible instead of auto.

[xereda]

Yeah! It's work!

  .custom {
    width: 80% !important;
    overflow: visible !important;
  }
  .modal-card-body {
    overflow: visible !important;
  }

Thanks a lot for the help.

[shentao]

Happy to help! :)

[xereda]

[shentao]

Looks great! 👍

[xereda]

Returning...

The problem using "overflow: visible;" In a Bulma modal is that I can no longer scroll when the form is larger than the screen layout.

What I effectively need is that scrolling within the modal works and that "vue-multiselect" is over all elements.

Look at the illustrations below:

[daenuprobst]

IMHO this is not a Bulma Modal scrolling problem. This will happen with all scrollable containers. Wouldn't it be preferable to position the dropdown list absolute, given this would mimics the behaviour of a native select? codepen.

[shentao]

The element is positioned absolutely within the multiselect container. What you probably mean is positioning it absolutely within the whole document, which is a bit harder to accomplish.

[tornography]

Hi there,

I ran into the same issue, and it's definitely a problem of the absolute positioned list, rather than the overflow of a parent container. As the multiselect wants to "imitate" and extend a html select element, which is overlapping any overflow (it even reaches out over the Browser), there needs to be a fix.

A solution I was working on is to set the list to position: fixed; z-index: n; with a calculated position to an element that acts as – as I call it – anchor. I build a little helper:

const calculatePosition = function calculatePosition(anchor, element) {
    const anchorBounding = anchor.getBoundingClientRect();
    const height = window.innerHeight;
    const general = ` width: ${anchorBounding.width}px; left: ${anchorBounding.left}px;`;
    let pos = `top: ${anchorBounding.bottom}px;` + general;
    if (height - anchorBounding.bottom < 200 && height - anchorBounding.top > height - anchorBounding.bottom) {
        pos = `top: inherit; bottom: ${height - anchorBounding.top}px;` + general;
    }

    element.setAttribute('style', pos);
};

with a method:

recalulateList() {
    calculatePosition(this.$el.querySelector('input'), this.$el.querySelector('ul'));
}

Triggering on start and, on scroll, to recalculate the position, keeping the element attached. Hope this helps finding a solution.

Regards, Manuel

[adam-lynch]

@tornography cool. I need a solution to this as well.

on scroll

An issue I see is that it needs to scroll with the element that opened it. So it needs to scroll with the nearest scrollable ancestor if that's not the body as well. Doing this check at runtime (going up the tree) is expensive. Hmm.... actually, maybe it could just hide on scroll?

[adam-lynch]

Using https://github.com/RobinCK/vue-popper would solve it I think. I find the popper docs to be a bit hard to follow but it seems like it would. That's if the maintainers are open to the dependency being added or adding enough callbacks, events, etc. so we can plug it in ourselves.

[arthurshlain]

I found very interesting example with Popper.js (and Bootstrap 4), but it's uses old version of vue-multiselect. https://codesandbox.io/s/0x608nxo10

[bibermann]

Why is this closed? I have the same issue in conjunction with a fixed header.

[shentao]

The v3, once it finally releases... allows for the user to provide their own implementation of the list (or the built-in but wrapped in whatever you want). You could then use popper or any other solution for that. As for 2.x, I sadly don’t have the time to work on this and I don’t want to introduce any dependencies. If you want to help, feel free to dig into the v3 branch, look for regressions compared the current version / see if what’s there solves this problem.

[swapnilnandgave08]

I am facing this in tailwind Dialog. How would i fix this?

[benoitkopp]

Same problem in bootstrap modal, any solution ?