Pop up issue

0
Hey, Currently, I have an issue with a popup. The issue occurs after I validate the content that the user inputs. The validation message inside popup automatically resizes and pushes the buttons at the bottom of the page, making them only half visible (as shown in the second picture). However, after I manually resize the popup, everything returns to normal and the buttons are back in place. I have tried changing the layout, creating a new layout, adding CSS, and managing scrolls, but nothing has really helped. I have checked all the older posts relevant to this question, and closing and opening the page upon pressing the validate button is not an option. Best regards, Slavko
asked
1 answers
0

Hi Slavko

 

Try to create a new popup layout, but without scroll container. Use only div's and make header, main content and footer for your layout and use styling to fix it on top/bottom. I can send you an example of how you can do it.

 

CSS for that:

 

Just change the Variables based on your project.

 

//Popup
.popup-wrapper {
    display: flex;
    align-items: stretch;
    min-width: 768px;
    height:100%;
    position: relative;
    z-index: 3;
    background: $valcon-white;

    &.gray {
        background: $valcon-primary-lightgrey;
    }

    .main-content {
        width: 768px;
        display: flex;
        flex-direction: column;

        .col-header,
        .col-footer {
            flex-shrink: 0;
            padding: $spacing-medium $spacing-large;
            z-index: 1;
        }

        .col-header {
            position: relative;
            // min-height: 80px;
            box-shadow: 0px 4px 4px $shadow;

            h1 {
                padding-top: 0;
                padding-bottom: 0;
                padding-right: 0;
                line-height: 24px !important;
            }

            .close-page {
                position: absolute;
                right: 0;
                top: 0;
            }

            .header-icon {
                color: $valcon-primary-darkgrey; 
                text-indent: 100%;
                overflow: hidden;
                display: block !important;
                padding: 16px 24px;
                width: 48px;
                height: 32px;

                &:hover {
                    text-decoration: none;
                    color: $gray;
                }

                &:focus {
                    text-decoration: none;
                }
            }
            .mx-title {
                line-height: $font-size-h1 !important;
            }
            .header-tagline {
                display: block;
                color: $gray;
                font-size: $font-size-h5;
                margin-top: $spacing-smaller;
                max-width: 60%;
            }
        }

        .col-footer {
            height: 64px;
            box-shadow: 0px -4px 4px $shadow;
        }

        .col-content {
            flex-grow: 1;
            overflow: auto;
            padding: $spacing-large;
            // overflow-x: hidden; // CHECK THIS
        }
    }

    .additional-content {
        background: $valcon-primary-lightgrey;
        width: 0px;
        transition: width .3s ease-in-out;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        & > * {
            width: 400px;
            display: block;
        }

        &.visible {
            width: 400px;
            transition: width .2s ease-in-out;

            .mx-listview li {
                padding: 0 16px;
            }
        }

        .close-menu {
            left: 0;
            top: 0;
            color: $valcon-primary-darkgrey; 
            background: $valcon-primary-lightgrey;
            display: block !important;
            padding: 16px;
            position: sticky; top: 0px;

            .back-icon {
                width:16px;
                height: 16px;
            }
            
            &:hover {
                text-decoration: none;
                color: $gray;
            }

            &:focus {
                text-decoration: none;
            }
        }

        .private-content {
            min-height: 250px;
        }

        .text-detail {
            color: $gray-dark !important;
        }
    }

    
}

.modal-dialog.mx-window.flexlayout_popup {
    width: auto !important;

    &.right-fluid {
        width: auto !important;
        top: 0 !important;
        right: 0 !important;
        left: unset !important;
        animation: slideinfromright 0.3s;

        .modal-body {
            height:100% !important;
        } 


        .col-content {    
            .content-768 {
                width:768px;

                height: 1300px;
            }
            .content-300 {
                width:300px;
                background: gray;
                height: 1300px;
                transition: width .3s ease-in-out;
            }
        }
    
    }
    
}
// Popup invisible close button
button.close-modal {
    top:0;
    left:0;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index:2;
}


// Built-in popups
.mx-underlay {
    background-color: $valcon-primary-darkgrey;
}

.modal-dialog {
    &.mx-window {
        width: 500px;
    }
    
    .modal-content {
        background: $valcon-primary-lightgrey;
        border: none;
        box-shadow: none;

        .modal-header {
            border-bottom: none;

            h4 {
                font-size: $font-size-h1;
                padding-top: 0;
                font-weight: 600;
            }
        }
    }
}

 

Best Regards

Marko

 

answered