Issue scrolling with the select box open

[teratux]

I noticed in #5 that you mentioned a fix on a scrolling problem, I think it's still happening, I'm using the latest 0.35 version, here's how it looks:

also checked and the .css is the latest, I'm wondering if there's a conflict with any elements in the page that might trigger this behavior.

Good job on this BTW !!!

[PhilippeMarcMeyer]

Sorry, i can't reproduce.
Could you provide some code ?
What is your browser, your os ?

Kind regards

[teratux]

I'm using chrome 83.0, linux opensuse 15.1.

This was the only way I could find to keep the menu in place:

.vsb-menu {
  position: sticky;
}

.vsb-menu .multi {
  padding-top: 20px;
}

.vsb-menu .multi .vsb-js-search-zone {
  margin-top: -20px;
}

[PhilippeMarcMeyer]

I'll try to reproduce : the plugin should be css proof : I mean it should work in every situation (css collison outise it's normal scope)

[PhilippeMarcMeyer]

First test :
I get rid of all the css in the index.html page

There is no issue in this case

For the next test I will need your help
I need to make the plugin css proof
Could you provide to me a working example of your code ?
I would them study the interactions beetween your css and the plugin !

Could you do that ?

[teratux]

First test :
I get rid of all the css in the index.html page

There is no issue in this case

For the next test I will need your help
I need to make the plugin css proof
Could you provide to me a working example of your code ?
I would them study the interactions beetween your css and the plugin !

Could you do that ?

I'll try to generate a video of the behavior, currently it is running in a company site and won't be able to provide direct access sorry. Later today I'll do this

[PhilippeMarcMeyer]

no thanks I need css. I'll do tests when I can

[teratux]

Does this help?
---- > zip file Deleted by Philip

check out the Aid Types field, sorry I can't provide more

[PhilippeMarcMeyer]

The problems comes from the class .layout-body
-webkit-transform: translateX(0);
transform: translateX(0);

The positionning of the selectBox which was relative to the body is now relative to this div and the menu

fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block

see css-position

[PhilippeMarcMeyer]

It's very interesting : transform in a parent make this element the reference element for a child positionned absolutely
I can get the right position of the element (the menu button) according to the viewPort (ie the body tag)

this.repositionMenu = function(){
    let rect = self.main.getBoundingClientRect();
    this.drop.style.left = rect.left+"px";
    this.drop.style.top = rect.bottom+"px";
}

but when I use the top to position the menu content, then the positioning is false because the top is set from another DOM element than the body tag.

I have tried to take advantage of the disruption effect of transform by putting it on the menu button itself !

It works perfectly, the menu is perfectly positionned, but when it overlap another menu then the button part of the other menu show thru the menu content !

At this time I can only advice : don't use transform with vanillaSelectBox
I hope I'll come with a solution sooner or later

I will put a big WIP on the work

[PhilippeMarcMeyer]

OK Roberto,
Could you test version v 0.41 please ?
I think this version is transform-proof :-)

[teratux]

Thank you, give me a few days to integrate it into our work and test

[teratux]

Tried it and confirmed it's working, thanks

[PhilippeMarcMeyer]

I'm very glad it is fixed
thank you this issue
bye