Toggle Mode Slide Over Content Not Working

0
Hello, I am using a scroll container on a page layout that uses the left region as a toggleable navigation menu.  It works normally when I use the "Shrink" or "Push aside" toggle mode options, but when I choose, "Slide over content", it puts it permanently behind the page objects.  Any ideas what I am doing wrong?  
asked
3 answers
2

Don’t think you are doing anything wrong, this option seems to be broken for some time now.

Would be helpful to raise a support ticket for this with Mendix support.

answered
1

Incase anyone finds this looking for an answer, here is some CSS I made to get the feature working for me - note the width in the CSS must match the width set for the sidebar

 

 

.mx-scrollcontainer.mx-scrollcontainer-horizontal.mx-scrollcontainer-slide {

position: relative;

display: flex;

align-items: stretch;

}

 

.mx-scrollcontainer.mx-scrollcontainer-slide .mx-scrollcontainer-center {

flex: 1 1 auto;

width: 100%;

margin-right: 0 !important;

}

 

.mx-scrollcontainer.mx-scrollcontainer-slide .mx-scrollcontainer-right {

position: absolute;

top: 0;

right: 0;

height: 100%;

width: 500px; //Side bar width

transform: translateX(100%);

transition: transform .25s ease;

z-index: 1051;

}

.mx-scrollcontainer.mx-scrollcontainer-slide.mx-scrollcontainer-open .mx-scrollcontainer-right {

transform: translateX(0);

}

 

.mx-scrollcontainer.mx-scrollcontainer-slide.mx-scrollcontainer-open .mx-scrollcontainer-center {

margin-right: 0 !important;

}

 

.mx-scrollcontainer.mx-scrollcontainer-slide.mx-scrollcontainer-open

.mx-scrollcontainer-right[style*="width: 0"] {

width: 500px !important; //Side bar width

}

 

answered
0

I'd expect this to be an issue with the z-index being too low. So, for anyone still having this issue hopefully that might lead to a solution.

answered