Currently trying to style a responsive form using bootstrap. This form actually didn’t have any responsive design applied within a separate css file before applying bootstrap, everything was purely type and effects.
But I’m having a lot of issues with a select element within this form.
For whatever reason, a select element, which comes before a series of paired radio buttons (themselves grouped within fieldsets), is cutting off both the legend element and the label element for the first radio input. It looks like this:
select element viewed w/ element picker
It looks like content-box is taking up a ton of space. Or that space is “saved” for an active select dropdown? I’m not sure why there’s so much blue there ^_^ I’m probably missing something very simple.
I’ve sectioned the select element off (using semantic section), I’ve wrapped it within its own row, I’ve tried applying some small-but-noticeable amount of extra margin-bottom (mb-4 for example).
None of this has worked. Here’s my code for this particular section:
<section class="col-8 col-md-4" id="recommend">
<label class="col-form-label" for="select">Would you recommend your stay at the Aperture
Science computer-aided Enrichment Center?</label>
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</section>
Any ideas? 😀
Answer
You should probably end your <select> element, as this could have unknown effects on the rest of the DOM.
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</select> <!-- <- this was missing -->