How display:flex did not effect the arrangement of labels in form of the given sample in Survey Form Project Challenge

Tell us what’s happening:
hi
In the given project assignment/challenge

Link to the project

I noticed display:flex , align-items: center is used on the selector label.

I wonder how is it possible that all the labels are arranged beautifully. Because logically if i use display:flex everything should align in a single row. It should looks messy as shown on the webpage that i made. To my surprise the name label for some reason is separated from the row.

Edit fiddle - JSFiddle - Code Playground

Also when i placed display: flex; and align-items: center to the whole container of the form i created. Looks like the labels are all well placed except the label name as you will see in the link.

Edit fiddle - JSFiddle - Code Playground

I tried to remove various styling lines to see what is fighting the display: flex on the sample given in the project. But no luck. The only thing i noticed is when i removed the display:flex code the radio and checkboxes jumbles up. But the other labels remain as they are. as shown on the link.

Edit fiddle - JSFiddle - Code Playground

i hope someone can explain to me whats going on here. Why display:flex; was placed for the selector label in the project’s sample? How is it that the labels remain unchanged even though display: flex ; , align-items: center; was used though logically all labels should be aligned in a single row as shown on my web page that i linked above.

Thanks

The style in question:

label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

You’re not looking at the html.

<div class="form-group">
   <label id="name-label" for="name">Name</label>
   <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required="">
</div>

You would need to place the flexbox on the form-group.

By placing flex-box on the parent element, the elements inside would be in a single row. That is because by default, display: flex also gives it the property flex-flow: row.

You have no elements INSIDE the label,. so visually there’s no effect.

hi again :grin:

first i want to note that the codes you see here is made by freecodecamp team. I am curious how the flex-box is working in these code.

here is the project to the sample provided.

The project

here is the sample

Sample

As you have said it should come in a single row. And you said there are no elements inside the label therefore there is no effect. This part i understand.

But for the “radio” and “checkbox” section. It seems flexbox is doing something there which i dont understand. Because when i remove the line display:flexbox. The radio and checkboxes are rearanged in a single or double row. But when i place back the line display:flexbox they are aligned in a single column.

What is causing the checkboxes and radio align in a single column? Though display: flex; should have made them in a single row.

Sorry again for any confusion.

Hi Hisoka, i was wondering the same thing, but i found out label is a container that contains only the input element, and the label element will act as a block element because of the flex property. Thereby, making each label (radio and checkbox option) on a single line. Well that is how i understood it.

1 Like

ummm. i dont thing so. on the webpage that i was creating to resemble the project’s sample webpage. i tried placing the attribute display: flex; and align-items: center on a selector label. To my surprise it worked the way it should. all the labels except name were aligned in a single row. I am not sure why the type name is different from the rest.

Edit fiddle - JSFiddle - Code Playground

Also when i placed display: flex; and align-items: center to the whole container of the form. Looks like the labels are all well placed except the label name as you will see in the link.

Edit fiddle - JSFiddle - Code Playground

Anyway i am still curious what is done in the project’s sample webpage. Because for some reason the attributes display: flex; and align-items: center works differently. I am curious what is causing it.

https://codepen.io/freeCodeCamp/pen/VPaoNP

hi @Hisoka

im not an expert too, but this might help you with.
almost all answer of your questions are there.

1 Like

thanks i will check it out. seems the trick is with the flex box.

i am just surprised how in the sample of the challenge the contents of the container are not altered when display flex is used. i wonder what is keeping them in order. i dont see the code flex-direction: column.

It works exactly as already explained.
https://jsfiddle.net/t9a0m2f5/

Your HTML is malformed in the examples you posted (check your closing label elements) and you are not using any grouping containers.

Thanks for the example.
Again the examples i provided was not created by me. its a sample of the challenge that freecodecamp provided. You will need to inform freecodecamp to use the grouping containers.
Link to the challenge

What i understand that display: flex; works differently with input type radio and checkbox.

So how are the input and labels with type text aligned?
Link to the sample provided by the challenge

I’m talking about the HTML in the two links you gave.
https://jsfiddle.net/AlexanderThe3rd/qejLbpfc/2/
https://jsfiddle.net/AlexanderThe3rd/embh5n04/1/

That is not fCC code because it has errors in it, you didn’t close the labels correctly, so you have everything nested inside labels that are auto closed.


Also, we do use containers, I coded the example project so I should know.

The name, email, and age are aligned for the same reason. Both the label and input element takes up the full width of their container.

1 Like

For the name, email, and age. The label and input are full-width elements and do not share the same line/row. They are below each other.

/* div container */
<div class="form-group">
  /* label is a full width element */
  <label id="name-label" for="name">Name</label>
  /* input is full width element */
  <input
    type="text"
    name="name"
    id="name"
    class="form-control"
    placeholder="Enter your name"
    required
  />
</div>

The input elements of type checkbox and radio are set to inline-block and share the same container as the label text (the label element is the container) so they are next to each other (the input and text share the same line/row).

/* label container */
<label>
  /* input is set as an inline-block element */
  <input
    name="user-recommend"
    value="definitely"
    type="radio"
    class="input-radio"
    checked
  />
  /* label text, text is inline */
  Definitely
</label>
1 Like

hi

sorry for the late reply. i gave my self some break from this post.

thanks for pointing out the mistakes. amazing by such a mistake it changes everything.

you are not using any grouping containers.

Whats the story of the grouping container that i am not using? Whats the issue here? i dont understand? Someone else mentioned about it as well.

To keep the records straight i wanted to understand the flex that you used in your codes. I was confused why the content did not align in a row when flex was used. But now from your and Ellaystar explanation i understand the labels are containers and behave as a block.

Thanks a mil.

One more thing. how did you add the short video or gif? how do you do that? :upside_down_face:

Not really sure what you are asking here?

There are many reasons for using containers. One such is to group elements inside a container so that the elements can be affected using that container or so that the container can be affected or placed without affecting the elements inside it.

In the case of the form, it allows you to group the label and input inside a container, both for spacing (using margin on the container) and element grouping.

That is why we have generic container elements like the div. You can’t really make any even mildly complex layout without grouping elements together. If you just use the semantic elements and no generic containers the layout options will be limited.

I used ScreenToGif.

Thanks for the link :v: