Form Styling: Labels and Inputs on same line

HTML-CSS
1

Hi all-- I’m trying to style my Survey Form project, and I can’t get the line behavior to work the way I want. Link to CodePen.

The first three inputs appear on a new line below their labels. Label and input are set to 100% width. But the select options should be set to 100% width as well, and they’re appearing inline. I tried specifying display: block to those elements, and it didn’t do any good. Also, the big list of checkboxes has gone horizontal rather than vertical. I could fix that with a flexbox, but I’m assuming there’s just an error in my formatting somewhere I should clean up?

Thanks!

2

Hi @jeff-tillinghast ,

The issue is using flexbox within the form-group class :

.form-group {
  margin: 0 auto 1.5rem auto;
  /* display: flex;
     align-items: center; */
}

If you wanna use flexbox, then you should specify the flex-wrap property for each form-group :

.form-group {
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
3

@jeff-tillinghast from what I can see from your code, there’s a whole lot of errors in your code and that’s why it won’t align your radio group vertically !!

4

Thanks, @spark07 ! I think that was a leftover from a previous draft. I removed the flex entirely and I’m back in business. Much appreciated.

1 Like
5

Thanks for joining in, @larrycode1. I am, of course, here because I realize that I have errors in my code. If you could be more specific, I might be able to fix them?

1 Like
6

Have you fixed it yet or you still needs help with it let me help you out ?

7

I removed the display: flex as per @spark07 's recommendations, and that fixed the immediate issues. Now I’m trying to clean up the vertical alignment on the checkboxes and radio elements, as they’re out of alignment. But you said that there are “a whole lot of errors in [my] code”-- If there are other issues that I’m not aware of, I’d love to know what you see so that I can fix it.

8

@jeff-tillinghast here’s your code

<div class="form-group">
          <label id="recommend">Would you recommend freeCodeCamp to a friend?</label>
          <input type="radio" name="recommend" value="recYes" class="inline" checked /> Definitely
          <input type="radio" name="recommend" value="recMaybe" class="inline"/> Maybe
          <input type="radio" name="recommend" value="recNo" class="inline"/> Not sure
        </div>
9

The error i’m seeing here is your value for the radio button is wrong and the class should be “input-radio” not inline as you stated…Lastly your input element should be wrapped inside your label element and add a line break
to it to align it vertically

10

if you have it like this, this would help, as you can see my input element is wrapped inside my label element

<div class="form-group">
<p>Would you recommend Dropp to a friend?</p>
<label>
<input type="radio" id="definitely" name="user-recommendation" value="definitely" class="input-radio" checked />DEFINITELY</label></br>
11

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