javascripthtmlcsssweetalert

Using sweetalert creates a white space in my Website

I'm working on this form for a school project and I added JS Sweetalert which works fine but it messes with my HTML.

This is webiste before Sweetaletr

This is after I use Sweetalert

It works so that when I press the text www.copyright.com the Sweetalert pops up. It has to do something with the CSS. I have tried to find a solution but I couldn't find one.

The white space goes up to my table. To cover the whole screen I am using flex: 1;

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("copyright").addEventListener("click", cFunction);
});

function cFunction() {
  Swal.fire({
    title: '<span style="color: white;">Credits!<span>',
    html: '<div style=line-height: 25px;"><span style="color: white;">Author: Jaša Gregorič<br>Date: November 2023<br>Mentor: Boštjan Vouk</span></div>',
    icon: 'info',
    confirmButtonText: 'OK',
    iconColor: 'white',
    background: '#1d1d1d'
  });
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    background-color: #121212;
}

.title {
    text-align: center;
    font-size: 23px;
    color: white;
    padding: 15px 0;
    font-family: sans-serif;
}

.titlePicture {
    margin-right: 10px;
}

.centered-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageTitle {
    font-weight: 100;
    margin-right: 5px;
}

.pageTitle2 {
    font-weight: bold;
}

.hrTitle {
    border-top: 2px solid red;
    border-bottom: 1px solid red;
}

.main {
    flex: 1;
    background-color: #1d1d1d;
    color: white;
    display: flex;
    flex-wrap: wrap;
}

.stocks {
    width: 60%;
    font-family: sans-serif;
    padding-top: 10px;
}

.titleStocks {
    font-weight: 100;
    text-align: center;
}

.stockTable {
    width: 100%;
    height: max-content;
    border-collapse: collapse;
}

.stockInfo{
    padding-left: 15PX;
    padding-bottom: 5px;
    font-size: 13px;
}

tr:hover:not(.names) {
    background-color: #292929;
}

.names {
    font-size: 15px;
    color: #8d8d8d;
}

.stockName, .stock {
    height: 75px;
    padding-left: 15px;
    border-top: #292929 solid 2px;
}

.stockName {
    width: 40%;
}

.stockNameLong{
    font-size: 15px;
    color: #8d8d8d;
}

.stock {
    width: 20%;
}

.portfolio {
    width: 40%;
    padding-left: 17px;
    padding-top: 5px;
    border-left: #292929 solid 2px;
}

.portTitle{
    font-family: sans-serif;
    font-weight: 100;
    font-size: 30px;
}

footer {
    text-align: center;
    background-color: #121212;
    color: white;
    font-family: sans-serif;
}

.hrFooter {
    border: 1px solid red;
}

@media screen and (max-width: 992px) {
    .stocks, .portfolio {
        width: 100%;
    }
    .stockName, .chg, .stock {
        height: 150px;
        padding-left: 15px;
        font-size: 30px;
        border-top: #292929 solid 2px;
    }
    .stockInfo{
        padding-left: 15PX;
        padding-bottom: 5px;
        font-size: 20px;
    }
    .stockNameLong{
        font-size: 20px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OnlineBrokers</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="icon" href="pictures/pillar_icon.png">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <header>
        <div class="title">
            <h1 class="centered-content">
                <img src="pictures/pillar.png" class="titlePicture">
                <span class="pageTitle">ONLINE</span>
                <span class="pageTitle2">BROKERS</span>
            </h1>
        </div>
    </header>
    <hr class="hrTitle">
    <div class="main">
        <div class="stocks" id="stocks">
            <table class="stockTable">
                <tr class="names">
                    <td class="stockInfo">Instrument</td>
                    <td class="stockInfo">Value</td>
                    <td class="stockInfo">Gain</td>
                    <td class="stockInfo">%</td>
                </tr>
                <tr>
                    <td class="stockName">SMCI<br><span class="stockNameLong">Super Micro Computer Inc.</span></td>
                    <td class="stock" id="numberSMCI"></td>
                    <td class="stock" id="numSMCI"></td>
                    <td class="stock" id="proSMCI"></td>
                </tr>
                <tr>
                    <td class="stockName">TSLA<br><span class="stockNameLong">Tesla Motors</span></td>
                    <td class="stock" id="numberTSLA"></td>
                    <td class="stock" id="numTSLA"></td>
                    <td class="stock" id="proTSLA"></td>
                </tr>
                <tr>
                    <td class="stockName">AMZN<br><span class="stockNameLong">Amazon.com, Inc.</span></td>
                    <td class="stock" id="numberAMZN"></td>
                    <td class="stock" id="numAMZN"></td>
                    <td class="stock" id="proAMZN"></td>
                </tr>
                <tr>
                    <td class="stockName">MSFT<br><span class="stockNameLong">Microsoft Corp.</span></td>
                    <td class="stock" id="numberMSFT"></td>
                    <td class="stock" id="numMSFT"></td>
                    <td class="stock" id="proMSFT"></td>
                </tr>
                <tr>
                    <td class="stockName">BTC<br><span class="stockNameLong">Bitcoin</span></td>
                    <td class="stock" id="numberBTC"></td>
                    <td class="stock" id="numBTC"></td>
                    <td class="stock" id="proBTC"></td>
                </tr>
                <tr>
                    <td class="stockName">XRP<br><span class="stockNameLong">Ripple</span></td>
                    <td class="stock" id="numberXRP"></td>
                    <td class="stock" id="numXRP"></td>
                    <td class="stock" id="proXRP"></td>
                </tr>
            </table>
        </div>
        <div class="portfolio">
            <h2 class="portTitle">PORTFOLIO</h2>
        </div>
    </div>
    <hr class="hrFooter">
    <footer>
        <h5><span id="copyright">© www.copyright.com</span></h5>
    </footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</html>

Solution

  • Your problem is because swal will add class .swal2-height-auto to body when swal is visible so it is forced to set to auto you need to add class !h-full to it body and attribute important and add this for higher priority:

    body.\!h-full[important] {
  height: 100% !important;
}


    document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("copyright").addEventListener("click", cFunction);
});

function cFunction() {
  Swal.fire({
    title: '<span style="color: white;">Credits!<span>',
    html: '<div style=line-height: 25px;"><span style="color: white;">Author: Jaša Gregorič<br>Date: November 2023<br>Mentor: Boštjan Vouk</span></div>',
    icon: 'info',
    confirmButtonText: 'OK',
    iconColor: 'white',
    background: '#1d1d1d'
  });
}
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    background-color: #121212;
}

.title {
    text-align: center;
    font-size: 23px;
    color: white;
    padding: 15px 0;
    font-family: sans-serif;
}

.titlePicture {
    margin-right: 10px;
}

.centered-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageTitle {
    font-weight: 100;
    margin-right: 5px;
}

.pageTitle2 {
    font-weight: bold;
}

.hrTitle {
    border-top: 2px solid red;
    border-bottom: 1px solid red;
}

.main {
    flex: 1;
    background-color: #1d1d1d;
    color: white;
    display: flex;
    flex-wrap: wrap;
}

.stocks {
    width: 60%;
    font-family: sans-serif;
    padding-top: 10px;
}

.titleStocks {
    font-weight: 100;
    text-align: center;
}

.stockTable {
    width: 100%;
    height: max-content;
    border-collapse: collapse;
}

.stockInfo{
    padding-left: 15PX;
    padding-bottom: 5px;
    font-size: 13px;
}

tr:hover:not(.names) {
    background-color: #292929;
}

.names {
    font-size: 15px;
    color: #8d8d8d;
}

.stockName, .stock {
    height: 75px;
    padding-left: 15px;
    border-top: #292929 solid 2px;
}

.stockName {
    width: 40%;
}

.stockNameLong{
    font-size: 15px;
    color: #8d8d8d;
}

.stock {
    width: 20%;
}

.portfolio {
    width: 40%;
    padding-left: 17px;
    padding-top: 5px;
    border-left: #292929 solid 2px;
}

.portTitle{
    font-family: sans-serif;
    font-weight: 100;
    font-size: 30px;
}

footer {
    text-align: center;
    background-color: #121212;
    color: white;
    font-family: sans-serif;
}

.hrFooter {
    border: 1px solid red;
}

@media screen and (max-width: 992px) {
    .stocks, .portfolio {
        width: 100%;
    }
    .stockName, .chg, .stock {
        height: 150px;
        padding-left: 15px;
        font-size: 30px;
        border-top: #292929 solid 2px;
    }
    .stockInfo{
        padding-left: 15PX;
        padding-bottom: 5px;
        font-size: 20px;
    }
    .stockNameLong{
        font-size: 20px;
    }
}

body.\!h-full[important] {
  height: 100% !important
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OnlineBrokers</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="icon" href="pictures/pillar_icon.png">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="!h-full" important>
    <header>
        <div class="title">
            <h1 class="centered-content">
                <img src="pictures/pillar.png" class="titlePicture">
                <span class="pageTitle">ONLINE</span>
                <span class="pageTitle2">BROKERS</span>
            </h1>
        </div>
    </header>
    <hr class="hrTitle">
    <div class="main">
        <div class="stocks" id="stocks">
            <table class="stockTable">
                <tr class="names">
                    <td class="stockInfo">Instrument</td>
                    <td class="stockInfo">Value</td>
                    <td class="stockInfo">Gain</td>
                    <td class="stockInfo">%</td>
                </tr>
                <tr>
                    <td class="stockName">SMCI<br><span class="stockNameLong">Super Micro Computer Inc.</span></td>
                    <td class="stock" id="numberSMCI"></td>
                    <td class="stock" id="numSMCI"></td>
                    <td class="stock" id="proSMCI"></td>
                </tr>
                <tr>
                    <td class="stockName">TSLA<br><span class="stockNameLong">Tesla Motors</span></td>
                    <td class="stock" id="numberTSLA"></td>
                    <td class="stock" id="numTSLA"></td>
                    <td class="stock" id="proTSLA"></td>
                </tr>
                <tr>
                    <td class="stockName">AMZN<br><span class="stockNameLong">Amazon.com, Inc.</span></td>
                    <td class="stock" id="numberAMZN"></td>
                    <td class="stock" id="numAMZN"></td>
                    <td class="stock" id="proAMZN"></td>
                </tr>
                <tr>
                    <td class="stockName">MSFT<br><span class="stockNameLong">Microsoft Corp.</span></td>
                    <td class="stock" id="numberMSFT"></td>
                    <td class="stock" id="numMSFT"></td>
                    <td class="stock" id="proMSFT"></td>
                </tr>
                <tr>
                    <td class="stockName">BTC<br><span class="stockNameLong">Bitcoin</span></td>
                    <td class="stock" id="numberBTC"></td>
                    <td class="stock" id="numBTC"></td>
                    <td class="stock" id="proBTC"></td>
                </tr>
                <tr>
                    <td class="stockName">XRP<br><span class="stockNameLong">Ripple</span></td>
                    <td class="stock" id="numberXRP"></td>
                    <td class="stock" id="numXRP"></td>
                    <td class="stock" id="proXRP"></td>
                </tr>
            </table>
        </div>
        <div class="portfolio">
            <h2 class="portTitle">PORTFOLIO</h2>
        </div>
    </div>
    <hr class="hrFooter">
    <footer>
        <h5><span id="copyright">© www.copyright.com</span></h5>
    </footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</html>