Text input widget with *form-modern* needs more space
A TextInput
widget rendered within a form of the CSS class form-modern
seems to emit overlapped text under some circumstances.
The form looks like this:
<h2>{% trans "Chat Settings - Matrix" %}</h2>
<form method="post" class="form form-modern">
{% csrf_token %}
{% field form.matrix_id prefix="@"%}
<button class="btn btn-sm btn-default" type="submit" name="action_send">{% trans "Save settings" %}</button>
</form>
The following issues are visible:
- The label text and the (optional) prefix visualization overlap. Maybe the label should be aligned relative to the right edge of the prefix instead of the left edge of the input field.
- The error text (in case of invalid input) is placed right aligned just below the widget. Thus it overlaps with the help text, if the help text covers the full width of the widget.
- The spacing below the widget feels a bit too small, if the widget is directly followed by a button. A forced linebreak (
<br/>
) solves the issue.