Html dropbox - survey

HTML-CSS
1

Hi can someone please help me.

With my drop box, nothing is showing in the box before and after I’ve selected my answer. You can see the option when you press the arrow but otherwise its blank.

<div class="form-group">
        <p class="survey-question"> Which description best describes your weekends:</p>
        <select id="dropdown" name="weekends" class="form-control" required>
          <option disabled selected value>Select The option that best descirbes you</option>
           <option value="couch">A day on the couach watching tv</option>
          <option value="hikes"> A hiking day</option>
          <option value="family"> A day spent with family</option>
          <option value="Shopping"> A day out at the mall</option>
          <option id="other">Other</option>
          </select>
          </div>

Thanks to anyone who helps!

2

Hey, is there a codepen? or maybe accompanying css? When i put your code snippet into an editor, the resulting dropdown list works fine. This makes me think the error is not in the HTML but the CSS

3

Copy/pasted to codepen.
Working good on firefox 85.01 (64 bit)

4

https://codepen.io/TrishaSuessmann/pen/OJbOjPP

hi ive attached the code here. thanks again for the help

5

so ive figured out it works on my phone fine but when i use it on my laptop, it does not show.

6

So the issue is here:

*, *::before, *::after {
   box-sizing:border-box;
}
...
.form-control {
   ...
   height:2.2rem;
   ...
   padding:22px;
   ...
}

for most browsers when unspecified 1rem defaults to 16px. meaning your <select> are 2.2*16=35px high.

Now lets take a look at the box model:
box_model

By default HTML calculates an elements height/width by using the content only. But you’ve specified box-sizing:border-box for everything. This means that the padding and border of an element is included in the height calculation of the element.

So with: padding:22px, this means your 35 px high <select> has:
total height - padding-top - padding-bottom - border-bottom - border-top = content
35px - 22px - 22px - 1px - 1px = -11px
-11px high of content is not going to show anything.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.