I have implemented a Bootstrap form with the form-floating class on the controls.
An issue arises when certain controls are hidden, causing the labels to remain visible and become congested. Oddly enough, this only occurs with some controls while others behave as expected. Despite identical code structure, this inconsistency puzzles me.
A noteworthy observation is that moving the hidden fields above the triggering field results in proper label hiding. However, upon relocating them back under the trigger, the labels resurface and overlap once more.
HTML:
<div class="form-floating mb-4">
<select class="form-select" id="frmProjectInterconnect" required>
<option value="" selected disabled></option>
<option>Yes</option>
<option>No</option>
</select>
<label for="frmProjectInterconnect">Project Interconnection Point</label>
</div>
<div class="form-floating mb-4">
<input type="number" class="form-control" id="frmInterconnectionCapacity" required>
<label for="frmInterconnectionCapacity">Interconnection Capacity (Mbps)</label>
</div>
<div class="form-floating mb-4">
<select class="form-select" id="frmDedicatedOrShared" required>
<option value="" selected disabled> </option>
<option>Dedicated</option>
<option>Shared</option>
</select>
<label for="frmDedicatedOrShared">Dedicated or Shared?</label>
</div>
<div class="form-floating mb-4">
<input type="text" class="form-control" id="frmServiceProvider" required>
<label for="frmServiceProvider">Service Provider</label>
</div>
Javascript:
$('#frmProjectInterconnect').change(function(){
if($(this).val() == "Yes") {
$("#frmInterconnectionCapacity").show();
$("#frmInterconnectionCapacity").attr('required', '');
$("#frmInterconnectionCapacity").attr('data-error', 'This field is required.');
$("#frmDedicatedOrShared").show();
$("#frmDedicatedOrShared").attr('required', '');
$("#frmDedicatedOrShared").attr('data-error', 'This field is required.');
$("#frmServiceProvider").show();
$("#frmServiceProvider").attr('required', '');
$("#frmServiceProvider").attr('data-error', 'This field is required.');
} else {
$("#frmInterconnectionCapacity").hide();
$("#frmInterconnectionCapacity").removeAttr('required');
$("#frmInterconnectionCapacity").removeAttr('data-error');
$("#frmDedicatedOrShared").hide();
$("#frmDedicatedOrShared").removeAttr('required');
$("#frmDedicatedOrShared").removeAttr('data-error');
$("#frmServiceProvider").hide();
$("#frmServiceProvider").removeAttr('required');
$("#frmServiceProvider").removeAttr('data-error');
}
});