The issue here is that the width of the textarea
does not match the width of the div
below it. Even setting min-width: 100%
or using the bootstrap class w-100
doesn't fix this problem.
https://i.sstatic.net/93uLa.png
<div class="container p-5">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{% include 'core/edit_post/edit_post_header.html' %}
<div class="row mt-4 form-group w-100">
<label class="font-weight-bold" for="{{ form.text.id_for_label }}">Text</label>
<textarea name="{{ form.text.name }}" cols="40" rows="10" maxlength="{{ form.fields.text.max_length }}"
class="textarea form-control" id="{{ form.text.auto_id }}"
placeholder="Enter your text"></textarea>
</div>
<div class="row">
{% include 'core/edit_post/edit_post_file_upload.html' %}
</div>
</form>
</div>