How do i create a customized popup layout in Mendix?

1
I have a requirement where i need to implement a modal right drawer where contents are loaded based on context.  Following is an illustration of the requirement Note that i need to set the content height to match the viewport height. This is completely different what popup layout offeres.   Using the popup layout will center the contents and hence I cannot use the popup layout in this case.   How do i implement this new  layout ?  
asked
3 answers
3

I've played with this in the past - the Slide In widget is a nice solution. In the discussion above I see some CSS solutions as well, and I built one of those out asa well. Here's what I did:

Add the class "sidebar-popup" to your pop-up page, and add this CSS to your project:

.sidebar-popup {
    position: fixed;
    top:0 !important;
}


.sidebar-popup {
    left:100% !important;
    height:100% !important;
    transition: transform .2s ease-in-out !important;
    transform: translateX(100%);
}

.sidebar-popup.mx-window-active {
    right: 0px !important;
    left: auto !important;
    transform: translateX(0);
}

.sidebar-popup.mx-window-active:not([data-focus-capturing="modal"]) {
    left: 100% !important;
    transform: translateX(100%);
}

.sidebar-popup .modal-content {

}

.sidebar-popup .mx-window-header .close {
    display: none;
}

.sidebar-popup .mx-resizer {
    display: none;
}

 

answered
3

We implemented this by creating a new popup layout. We had set the width and height of the pop-up to 100vw and 100vh in a new CSS class that is added to the modal. After that you can add a layout grid to that modal which includes the context on the right hand side.

answered
1

Hi Kamal,

As was already suggested, the slide widget can do this in a cool way.

I you really want a popup you do not need to create a custom widget, using sass/css you can have a popup look like and be place whatever way you want. 

EDIT: beaten with 20 seconds! anyway, what Freek said

answered