Build a Survey Form - Drop down and radio text alignment

[adigee1011]

Hello! Having trouble with couple of things on my challenge:

1. Drop down width. i am unable to make the width/height of drop down similar to other input boxes ----- this is only an issue on Safari not Chrome

2. Radio and checkbox text alignment. I have tried a bunch of things to get ‘radiobutton’:text in a single line but it always come out to radio button followed by a line break and then the text.

Can anyone please guide me? Link to my pen - https://codepen.io/adigee515/pen/OJxdwQG

[mikskywalker]

EDIT: Let us not add <br>. I just learned it’s bad practice to do that haha lol
First, you can try adding <br> to your texts:
Definitely<br>...
Maybe<br>
Wiki<br>

Next, you can wrap sections with a <div> element.
This is what I did too for your project then some minor adjustments like the width, height, and display.

You can use this for reference

HTML

<div id="radios">
    <label for="definitely"><input id="definitely" type="radio" name="rec" value="definitely"> Definitely<br> </label>

    <label for="maybe">
      <input id="maybe" type="radio" name="rec" value="maybe"> Maybe<br>
    </label>

    <label for="not sure">
      <input id="not sure" type="radio" name="rec" value="not sure"> Not sure<br>
    </label>
    </div>

CSS

#radios {
  width: auto;
  height: auto;
}

#checkbox_div {
/*   display: inline-block; */
  width: auto;
  height: auto;
  text-align: start;
  
}

All the best!

[Roma]

@mikskywalker

First, you can try adding <br> to your texts:

Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs

[adigee1011]

@mikskywalker

<div id="radios">
    <label for="definitely"><input id="definitely" type="radio" name="rec" value="definitely"> Definitely<br> </label>

    <label for="maybe">
      <input id="maybe" type="radio" name="rec" value="maybe"> Maybe<br>
    </label>

    <label for="not sure">
      <input id="not sure" type="radio" name="rec" value="not sure"> Not sure<br>
    </label>
    </div>

Thank you! This is what I get

        Would you recommend freeCodeCamp to a friend?  
 <div id="radios">
    <label for="definitely"><input id="definitely" type="radio" name="rec" value="definitely"> Definitely<br> </label>

    <label for="maybe">
      <input id="maybe" type="radio" name="rec" value="maybe"> Maybe<br>
    </label>

    <label for="not sure">
      <input id="not sure" type="radio" name="rec" value="not sure"> Not sure<br>
    </label>
    </div>

[mikskywalker]

oh, thank you for teaching us this!

[adigee1011]

I am just not sure what the difference is! It is literally the same code

[mikskywalker]

how about in the css?

[adigee1011]

#radios {
  width: auto;
  height: auto;
  text-align: start;
}

[mikskywalker]

that’s good. I saw the problem:

input {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}

try commenting this out on your CSS

[adigee1011]

If I comment this out, then the input boxes shrink. I am surprised it is not happening on your end?

[mikskywalker]

We can try adding a new div for the checkboxes then style that new div separately with CSS?

[adigee1011]

Actually, I commented that out and added the following which made it work

input[type=text] {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=email] {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=number] {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}

[adigee1011]

thank you!!! I have been struggling for last 9 hours lol

[mikskywalker]

Haha yey!!! Glad to be able to help!!!