Why is my select element hiding proceeding elements?

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 -->

Leave a Reply

Your email address will not be published. Required fields are marked *