After experimenting with the code, I managed to place an alert box within a textarea using the following CSS styling:
CSS :
#alertBox {
width: 30%;
height: 12%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 40px;
background-color: #0075bf;
color: white;
text-align: center;
font-size: 20px;
}
#template {
font-family: Lato Regular;
width: 70%;
margin: auto;
margin-top: 10%;
}
@media (max-width: 992px) {
#alertBox {
width: 100%;
margin-left: 3%;
margin-right: 10%;
}
#template {
width: 100%;
margin-top: 5%;
}
}
HTML :
<div class="container">
<article id="template">
<form role="form">
<fieldset class="form-group">
<h5 for="myOffer">Mon offre</h5>
<div id="alertBox" class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> Merci de compléter votre offre avant de cliquer sur envoyer
</div>
<textarea class="form-control" rows= "13 " id="myOffer "></textarea>
</fieldset>
</form>
</article>
</div>
However, during resizing of the form, the positioning of the alert box inside the textarea is not perfect.
Check out the desired outcome here:
https://i.sstatic.net/d1tno.png
If you have any recommendations on how to improve this, please share them. Thank you!