Kevin Powell - Community•4w ago

Popup Overflow Horizontally

I am not able to provide screenshots or code currently. To summarise, I was making a simple popup window for a website for their Privacy Policy. I put everything into proper dividers and used JavaScript for a darker background, etc. The issue is, I had some very long <p> HTML elements and they took a whole line creating a horizontal scroll. I obviously do not want this, it would be ideal if everything fit vertically and the user only had to scroll vertically. ChatGPT came with some prompts suggesting to use overflow-x/y and word-wrap but nothing I pasted really worked properly? If somebody could briefly explain how to proceed in this scenario and what should I do that'd be helpful for me to retake on this task in a few days when I'm back on my PC

6 Replies

13eck•4w ago

Please make a minimum reproduction on codepen so we can see what the issue is. Right now we can't help besides give vague suggestions since you've not given anything beyond "it doesn't work". And without seeing the code we can't help make it work.

MeiFTWOP•4w ago

The HTML:

<footer>
        <div id="footer-content">
            <p><a class="link" href="#" id="open-policy"><span class="bold">Política de Privacidad</span></a></p> |
            <div id="policy-popup" class="popup-overlay">
                <div class="popup-content">
                    <button class="close" id="close-popup">&times;</button>
                    <div class="popup-scrollable-content">
                    <section id="notice">
                    </section>
                    </div>
                </div>
            </div>
        </div>
</footer>

<footer>
        <div id="footer-content">
            <p><a class="link" href="#" id="open-policy"><span class="bold">Política de Privacidad</span></a></p> |
            <div id="policy-popup" class="popup-overlay">
                <div class="popup-content">
                    <button class="close" id="close-popup">&times;</button>
                    <div class="popup-scrollable-content">
                    <section id="notice">
                    </section>
                    </div>
                </div>
            </div>
        </div>
</footer>

The JavaScript:

const openPolicyBtn = document.getElementById('open-policy');
    const closePopupBtn = document.getElementById('close-popup');
    const policyPopup = document.getElementById('policy-popup');

    // Open popup when link is clicked
    openPolicyBtn.addEventListener('click', function (event) {
        event.preventDefault(); // Prevent default link behavior
        policyPopup.style.display = 'flex'; // Show the popup
    });

    // Close popup when the 'X' button is clicked
    closePopupBtn.addEventListener('click', function () {
        policyPopup.style.display = 'none'; // Hide the popup
    });

    // Optional: Close the popup when clicking anywhere outside the content
    policyPopup.addEventListener('click', function (event) {
        if (event.target === policyPopup) {  // Check if the clicked area is the overlay
            policyPopup.style.display = 'none';
        }
    });

const openPolicyBtn = document.getElementById('open-policy');
    const closePopupBtn = document.getElementById('close-popup');
    const policyPopup = document.getElementById('policy-popup');

    // Open popup when link is clicked
    openPolicyBtn.addEventListener('click', function (event) {
        event.preventDefault(); // Prevent default link behavior
        policyPopup.style.display = 'flex'; // Show the popup
    });

    // Close popup when the 'X' button is clicked
    closePopupBtn.addEventListener('click', function () {
        policyPopup.style.display = 'none'; // Hide the popup
    });

    // Optional: Close the popup when clicking anywhere outside the content
    policyPopup.addEventListener('click', function (event) {
        if (event.target === policyPopup) {  // Check if the clicked area is the overlay
            policyPopup.style.display = 'none';
        }
    });

and the CSS:

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    justify-content: center;
    align-items: center;
}

.popup-overlay.active {
    display: flex;
}

.popup-content {
    background-color: white;
    padding: 20px;
    width: 75%;
    height: 80%;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.popup-scrollable-content {
    height: 100%;
    overflow-y: auto;
    padding-right: 20px;
    word-wrap: break-word;
    word-break: break-word; 
    white-space: normal;
}

p {
    word-wrap: break-word; 
    word-break: break-word; 
    white-space: normal; 
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 40px;
    background: none;
    border: none;
    color: var(--wine);
    cursor: pointer;
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    justify-content: center;
    align-items: center;
}

.popup-overlay.active {
    display: flex;
}

.popup-content {
    background-color: white;
    padding: 20px;
    width: 75%;
    height: 80%;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.popup-scrollable-content {
    height: 100%;
    overflow-y: auto;
    padding-right: 20px;
    word-wrap: break-word;
    word-break: break-word; 
    white-space: normal;
}

p {
    word-wrap: break-word; 
    word-break: break-word; 
    white-space: normal; 
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 40px;
    background: none;
    border: none;
    color: var(--wine);
    cursor: pointer;
}

Inside section id="notice" are the long <p>'s I talked about

MeiFTWOP•4w ago

and this is the horizontal scroll I was talking about

MeiFTWOP•4w ago

Update: https://codepen.io/Xun149029/pen/QwWZzxz I replicated the code in CodePen, interestingly enough removing the CSS of my footer solves the issue... but I kind of need the Footer to have this style

Mannix•4w ago

you have set white-space: nowrap; on the p element this will force that long paragraph to be on one line

MeiFTWOP•4w ago

Wow, to think that it was that simple. Thank you, I alternatively found another solution which would be just placing the entire "policy-popup" element just outisde of the footer and have it below or w/e. Thanks a lot 👍

Gaming

Programming

Popup Overflow Horizontally

Did you find this page helpful?