I'm currently working on developing a method to incorporate space for error messages within my form input group component. The main objective is to prevent any displacement of elements on my forms when displaying error messages.
In this scenario, it is crucial to have 25 pixels of blank space between the password input and the "I forgot my password" link. This spacing ensures that when an error message appears due to invalid input, no other element on the page will be shifted.
https://i.sstatic.net/GcOSs.png
Originally, I was able to achieve this with negative margins until I transitioned to using the bootstrap 4 grid system.
<b-form-group v-bind="$attrs" class="tsny_input-group">
<b-input
v-bind="$attrs"
v-model="innerValue"
class="tsny_input"
:invalid="invalid"
/>
<div class="tsny_field_error-text">
{{ errors[0] }}
</div>
</b-form-group>
.tsny_input-group {
margin-bottom: 25px;
}
.tsny_field_error-text {
font-family: "expo-sans-pro", sans-serif;
color: #FF8787;
margin-bottom: -25px;
}