Search code examples
javascriptsweetalert2

With SweetAlert2 how can I get the title and text on separate lines with a Toast alert?

I would like to be able to use SweetAlert2 for my "growl" notifications on my website. I am using the Toast option and it works perfect. However, I would like to get the Title and Text each on their own lines and not inline.

UPDATE: So I've inspected the element and it is using inline flex. Below is the output code of the alert:

<div class="swal2-container swal2-top-end swal2-fade swal2-shown" style="overflow-y: auto;">
    <div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-toast swal2-show" tabindex="-1" role="alert" aria-live="polite" style="display: flex;">
        <div class="swal2-header">
            <ul class="swal2-progress-steps" style="display: none;"></ul>
            <div class="swal2-icon swal2-error" style="display: none;"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span>
            </div>
            <div class="swal2-icon swal2-question" style="display: none;"></div>
            <div class="swal2-icon swal2-warning" style="display: none;"></div>
            <div class="swal2-icon swal2-info" style="display: none;"></div>
            <div class="swal2-icon swal2-success swal2-animate-success-icon" style="display: flex;">
                <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div><span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
                <div class="swal2-success-ring"></div>
                <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
                <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
            </div><img class="swal2-image" style="display: none;">
            <h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>
            <button type="button" class="swal2-close" aria-label="Close this dialog" style="display: none;">×</button>
        </div>
        <div class="swal2-content">
            <div id="swal2-content" style="display: block;">You are now logged in!</div>
            <input class="swal2-input" style="display: none;">
            <input type="file" class="swal2-file" style="display: none;">
            <div class="swal2-range" style="display: none;">
                <input type="range">
                <output></output>
            </div>
            <select class="swal2-select" style="display: none;"></select>
            <div class="swal2-radio" style="display: none;"></div>
            <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
                <input type="checkbox"><span class="swal2-label"></span></label>
            <textarea class="swal2-textarea" style="display: none;"></textarea>
            <div class="swal2-validation-message" id="swal2-validation-message"></div>
        </div>
        <div class="swal2-actions" style="display: none;">
            <button type="button" class="swal2-confirm swal2-styled" aria-label="" style="display: none; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">OK</button>
            <button type="button" class="swal2-cancel swal2-styled" aria-label="" style="display: none;">Cancel</button>
        </div>
        <div class="swal2-footer" style="display: none;"></div>
    </div>
</div>

The header code is:

<h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>

and the text code is:

        <div class="swal2-content">
            <div id="swal2-content" style="display: block;">You are now logged in!</div>
            <input class="swal2-input" style="display: none;">
            <input type="file" class="swal2-file" style="display: none;">
            <div class="swal2-range" style="display: none;">
                <input type="range">
                <output></output>
            </div>
            <select class="swal2-select" style="display: none;"></select>
            <div class="swal2-radio" style="display: none;"></div>
            <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
                <input type="checkbox"><span class="swal2-label"></span></label>
            <textarea class="swal2-textarea" style="display: none;"></textarea>
            <div class="swal2-validation-message" id="swal2-validation-message"></div>
        </div>

With the main text part being:

<div id="swal2-content" style="display: block;">You are now logged in!</div> Hope this helps.

This is what it outputs:

This is what it outputs

This is how I would like it to look:

This is how I would like it to look

UPDATE 2:

Thanks to the help from alekstrust, I now have code that does what I need. Below is the full CSS I used:

.swal2-container .swal2-popup.swal2-toast {
    flex-direction: column;
    align-items: start;
    position: relative;
}

.swal2-container .swal2-icon {
    position: absolute;
    top: 50%;
    margin-top: -20px !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
    margin-left: 50px;
    text-align: left;
}
Solution

  • These styles would do part of the job:

    .swal2-container .swal2-popup.swal2-toast {
  flex-direction: column;
  align-items: start;
}

.swal2-container .swal2-popup.swal2-toast .swal2-content {
  margin-left: 50px;
}

    Not the best icon alignment, though.

    Update

    This will do a better job:

    .swal2-container .swal2-popup.swal2-toast {
  flex-direction: column;
  align-items: start;
  position: relative;
}

.swal2-container .swal2-icon {
  position: absolute;
  top: 13px;
}

.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
  margin-left: 50px;
}

    See https://codepen.io/alekstrust/pen/dybJXMo