Francis Francis - 3 months ago 11
CSS Question

Placing a textarea and a form to the bottom of the div distorts the width of the textarea

I am trying to place a textarea and a form with input type submit to the bottom of the page. My challenge is that I can place the both to the bottom of the page but the width of the textarea gets distorted. This is my code:



.msg_input {
width: 100%;
border: 1px solid white;
border-top: 1px solid #DDDDDD;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
}
.goBottom {
position: fixed;
bottom: 0;
}

<div class="goBottom">
<textarea placeholder="...type here" class="msg_input" rows="4">
</textarea>

<form method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Exit" />
</form>
</div>





the width of the textarea is not taking the full width 100% of the page. Please what could be wrong?

Answer

Update the following css:

.goBottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

Reason this should work: The fixed position element doesn't seem to take full width. Hence this makes sure that it is. textarea takes full width of goBottom element.