KPC
Kevin Powell - Community•5d ago
MeiFTW

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
13eck•5d 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.
MeiFTW
MeiFTWOP•4d 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
MeiFTW
MeiFTWOP•4d ago
and this is the horizontal scroll I was talking about
No description
MeiFTW
MeiFTWOP•4d 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
Mannix•4d ago
you have set white-space: nowrap; on the p element this will force that long paragraph to be on one line
MeiFTW
MeiFTWOP•4d 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 đź‘Ť

Did you find this page helpful?