In my Laravel 5 project with jQuery 3 and Bootstrap 4.4 integrated using Blade templates, there are certain blocks that are initially hidden.
<div class="form-row m-0 p-0" id="div_checking_step_2_recurring_rent" style="display: none; border: 2px dotted blue;">
<label for="numeric_step_2_recurring_rent" class="col-12 col-sm-6 col-form-label" style="border: 2px dotted yellow;">Rent</label>
<div class="col-12 col-sm-6">
{!! $viewFuncs->text('numeric_step_2_recurring_rent', '', "form-control editable_field", ["maxlength"=>"255",
"autocomplete"=>"off", "style"=>"border: 2px dotted green;" ] ) !!}
<input type="text" id="step_2_recurring_rent" name="step_2_recurring_rent" value="0" style="visibility: hidden; width: 1px; height: 1px">
</div>
</div>
These blocks only become visible when a user clicks on a checkbox. This functionality is achieved through the following method:
bookingsAndAvailability.prototype.is_recurringOnChange = function () {
var is_recurring= $("#step_2_recurring_is_recurring:checked").val()
if (is_recurring) {
$("#div_checking_step_2_recurring_rent").css("display", "block")
} else {
$("#div_checking_step_2_recurring_rent").css("display", "none")
}
}
The issue arises when the above method is triggered and 'div_checking_step_2_recurring_rent' becomes visible.
In this scenario, the label and div inside 'div_checking_step_2_recurring_rent' do not align on the same line; instead, the div appears below the label.
If the style "display: none;"
is removed from the code as mentioned above, then the label and div align properly on the same line within 'div_checking_step_2_recurring_rent'.
I'm seeking assistance in identifying what could be missing in the 'bookingsAndAvailability.prototype.is_recurringOnChange' method?
Thank you!