Menu
I am trying to make a toaster message box center aligned even if the message length varies. Toaster width should vary as per the message. Please look into my inline comments in CSS code. That is were I am confused.
My code
HTML
<body>
<div class="alert alert-danger toast">
<span class="msgText"></span>
</div>
<div class="moreHeight"></div>
</body>
CSS
.toast {
margin: 0px auto;
position: fixed;/*This is must for me. Toaster should be in same place even I scroll to bottom.*/
z-index: 9999;
margin-left: 35%;/*Should not be hardcoded since message length is not static*/
/* width :50%;/*Need to be removed. Width should be dynamic based on messahe length*/
}
/*To check on scrolling toaster is visible at top*/
.moreHeight{
height:1200px;
}
JS
$( document ).ready(function() {
var msg = "Small Message";
//var msg = "Leeeeeeeeeeeeeeeeeeeeeeeeeengthy Message is here";
$(".msgText").text(msg);
$(".alert").show();
});
Plunker Demo
453
Use following css as it is position:fixed instead of margin
.toast {
left: 50%;
position: fixed;
transform: translate(-50%, 0px);
z-index: 9999;
}
Updated plnkr
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
