[Silk UI Web] Modal horizontally and vertically centered

Forge Component
(86)
Published on 25 Mar by OutSystems R&D
86 votes
Published on 25 Mar by OutSystems R&D

Hi guys would like to know how to vertically and horizontally center the modal? It keeps appearing at the bottom. I tried using css from other posts and flexbox but it doesn't work for me any suggestions how I can achieve this? Thank you :)

Clintjie Lo wrote:

It keeps appearing at the bottom.

Hi there,


not sure how to interpret your question...where you expecting this modal to open centered on screen?

The default behavior is to appear on the bottom of the screen.

The out-of-the-box tool to get a centered modal is to use the RichWidgets > Popup_Editor.

Hi Clintjie,


As Ricardo said you can use a popup_editor for that purpose, but if you really want to user the SILK modal, try using this on the page CSS:


SyntaxEditor Code Snippet

body.ModalOpened .ModalContainer{
    transform: translateX(-50%) translateY(-50%) translateZ(0);
}


You can adjust translateX and translateY percentage to get the modal wherever you want on the page.


Best regards.

Solution

Hi Clintjie Lo

I hope the following CSS will help you achieve the desired result


.Modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

body.ModalOpened .Modal {
    pointer-events: auto;
    display: flex;
}

body.ModalOpened .ModalContainer {
    display: block;
    -webkit-transform: translateX(0) translateY(0) translateZ(0);
        -ms-transform: translateX(0) translateY(0) translateZ(0);
            transform: translateX(0) translateY(0) translateZ(0);
}

.ModalContainer {
    display: block;
    top: auto;
    left: auto;
    bottom: auto;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(0) translateY(100vh) translateZ(0);
        -ms-transform: translateX(0) translateY(100vh) translateZ(0);
            transform: translateX(0) translateY(100vh) translateZ(0);
}


My Regards

Solution

José Rosário wrote:

Hi Clintjie Lo

I hope the following CSS will help you achieve the desired result


.Modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

body.ModalOpened .Modal {
    pointer-events: auto;
    display: flex;
}

body.ModalOpened .ModalContainer {
    display: block;
    -webkit-transform: translateX(0) translateY(0) translateZ(0);
        -ms-transform: translateX(0) translateY(0) translateZ(0);
            transform: translateX(0) translateY(0) translateZ(0);
}

.ModalContainer {
    display: block;
    top: auto;
    left: auto;
    bottom: auto;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(0) translateY(100vh) translateZ(0);
        -ms-transform: translateX(0) translateY(100vh) translateZ(0);
            transform: translateX(0) translateY(100vh) translateZ(0);
}


My Regards


I tested this solution, and it worked perfectly, the animation is smooth as butter! Good work!

Hi guys thank you for the quick reply. Yes my goal was for it to display same as a popup.

I just thought that the modal loads faster than the popup so I opted to use it. Thank you for all the great answers you guys gave me cheers :)