Position a pop-up page on the right side (instead of middle of screen)

0
Hi there, I have a design (see image below) where they placed a pop-up page on the right side of the screen. I am not quite sure what the best way to implement this is. Can anybody help me with this? Thanks! Tim    
asked
2 answers
2

This could be done with a sidebar widget and controlled by a non-persistent entity in the same way the Bottom Sheet widget works on native mobile.

Another way this could be done is to restyle your popups with CSS. I played with this a year or so ago, so this info might be a bit out of date but hopefully you can use it. I think it all worked except for the “slide away” animation (the tray just disappeared). I didn’t get that figured out but maybe a CSS guru could make it happen, or a JavaScript action could achieve it.

Check out this video for an example.

To achieve this: 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
1

Hi Tim,

Did you look into Task Tracker app in template gallery? If you preview this app and click on add task you will see the same behaviour that you are looking for. You may just download this as test app and copy the required custom styles from there or get some ideas from there and add your own custom styles as per your requirement. 

 

 

Hope this helps! 

answered