Having a modal with a form (using Bootstrap-Vue and Vue2) where each row contains two fields. If the user does not input a valid value into a field, the state of that field turns false, causing the box to be highlighted in red and displaying an error message below the field. However, the challenge is maintaining alignment between both fields in the same row:
https://i.sstatic.net/zACs8.png
Here's how it looks without any errors:
https://i.sstatic.net/Vi7mx.png
The code snippet is as follows:
<div class="text-right">
<div class="row">
<div class="col-md-6">
<div class="modal-label">Field 1</div>
<b-form-input
:class="{ 'invalid-form-box': !stateField1(), 'modal-input': true}"
v-model="course_number"
type="number"
placeholder="Field 1"
:trim="trimInput"/>
<p v-if="!stateField1()" class="invalid-form-text">
Not valid input for Field 1
</p>
<p v-if="!stateField2() && stateField1()" class="invalid-form-text"></p>
</div>
<div class="col-md-6">
<div class="modal-label">Field 2</div>
<b-form-input
:class="{ 'invalid-form-box': !stateField2(), 'modal-input': true}"
v-model="score"
type="number"
placeholder="Field 2"
:trim="trimInput"/>
<p v-if="!stateField2()" class="invalid-form-text">
Not valid input for Field 2
</p>
<p v-if="!stateField1() && stateField2()" class="invalid-form-text"></p>
</div>
</div>
...
</div>
<style scoped>
div {
margin: auto 0;
direction: rtl;
}
input {
direction: rtl;
}
.modal-label {
margin-bottom: 0.5rem;
}
.modal-input {
margin-bottom: 0.5rem;
}
.modal-header .close {
padding: 1rem 1rem !important;
margin: -1rem auto -1rem -1rem !important;
}
.invalid-form-text {
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #dc3545;
}
.invalid-form-box:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
background-repeat: no-repeat;
}
.invalid-form-box {
border-color: #dc3545;
background-repeat: no-repeat;
}
</style>
To address the alignment issue, attempts were made to replace <p> with <div>, <label>, and <span>. The use of <br> was also tested.