Survey - need help with rows & a label keeps disappearing

Hey guys!

Sooo here is my survey page, I’ve worked really hard on it but can’t seem to get two things:

  1. How do I make the drinks (checkbox-label) work the way the radio one above works?
  2. Where the hell does my comments label disappear??

Any and all other feedback would be super helpfull and welcome !

Thank you so much in advance!!

Hi, I think you need to better define your elements and sections.

For example:

<class="checkbox">
<input name="checkbox" value="1" type="checkbox" />
<label>Water</label>

What is this <class="checkbox"> doing hanging all by itself? :slight_smile:

adding <br /> after each line would bring each box to a different line.

<label id="checkbox-label">
        What would you like to drink? (pick as many as you like)</label><br />
    <div>
      <class="checkbox"><input name="checkbox" value="1" type="checkbox" /><label>Water</label><br />
        <class="checkbox"><input name="checkbox" value="2" type="checkbox" /><label>White wine</label><br />
          <class="checkbox"><input name="checkbox" value="3" type="checkbox" /><label>Red wine</label><br />
            <class="checkbox"><input name="checkbox" value="4" type="checkbox" /><label>Beer</label><br />
              <class="checkbox"><input name="checkbox" value="5" type="checkbox" /><label>Soft drinks</label></div>
  </div>
1 Like

Thank you so much !! I cleaned up my code (I think) but I still don’t understand why my “Any more comments?” line is invisible…

You forgot to close the select tag just above it.

1 Like

I would recommend removing the <br /> tag after the label, though, as that completely throws the grid off. The grid layout is putting the label in the left column, the <br /> in the right column, and the div containing the drinks back in the left.

Also, you wrap your ‘Diet’ radio buttons in li tags (without a ul, by the way), but you don’t wrap the ‘Drink’ checkbox lines. You’re getting different behavior because they’re fundamentally different. I’d make both unordered lists, and use CSS to set the list-style-type to none.

2 Likes

Thank you ever so much everyone - all fixed now !! :pray::relaxed:

1 Like