FCC Survey Form Help - Input boxes

Hi!

Here is the link to my codepen for the Survey form project:
https://codepen.io/brett-dykes/pen/wbRRzj

I am about half-way done. But my input boxes get more and more off-center from each other the more input boxes I add. I noticed it first with just two of them, they were about 1px off center from each other. Now that I’ve added the “age” input - its even worse. Worried if I dont find the solution before going forward, I’ll just make it worse (plus, its maddening to me).

I’ve scoured the internet, but honestly I am not sure what question to ask anymore. I’ve edited every CSS style and nothing works. Help!!

:slight_smile:

It’s caused by the different length of the labels.

As of right now there’s no restriction on the various elements size, so it all boils down to how big the label will be.
You can try with a simple password and you’ll see what I mean.

Generally speaking, you want a more structured way, either with flex / grid or a column system to give a more structured feeling to your form, so they will all line up nicely.

2 Likes

Problem is centered text that varies in length.

    words
paragraph
 sentence

What can help is to give fixed width to the label that is large enough (~80px) to fit even the longest label.

I also noticed that you have several helper elements around labels and input fields. I don’t know where you want to take this project, but as is, they are unnecessary. I would recommend one block element (row) containing inline-block label & input.
Also using <strong> and <br> is kinda icky. Labels have clear semantic meaning. I don’t see why you need to emphasize them more. If it is to get bold style, you should do it with CSS. You can get rid of the <br> by using a mentioned row container.

2 Likes

Hi, please forgive my ignorance - still VERY new to coding.

What do you mean by helper elements?
This project isnt really going anywhere other than trying to learn based on the freecodecamp web survey project.

I am also having a hard time figuring out how to/why to use grids/flex’s. Do you guys know of any great resources that I can learn from regarding these?

Sure, I guess I am not sure how to use flex/grids just yet - do you have any good resources that I can learn from regarding these? I went through FCC’s lessons, but I am failing to see how those actually apply to webdesign.

So the biggest advice I can start with is format your code!!

If you want others to help,. you have to follow some sort of coding format. All of your indention is spaghetti.

You can’t go wrong following these: https://google.github.io/styleguide/htmlcssguide.html

So first thing I did was beautified your code.
And guess what I noticed right away? Almost all your html isn’t even within your body tags…

Like line 13 you </body>
Which means lines 14 - 50 are all invalid html.

Never use <br> in your webpage. Just don’t use it. It’s valid html, sure, but use CSS to style.

The reasoning for your labels/inputs not lining up is because you don’t have them in the same containers. You have your label in one box and your inputs in another… place them both in same box (div) (label).

So the structure should be like this:

<div class="container">
 <label>
   <span>Blah</span>
   <input type="text">
 </label>
 <label>
   <span>Blah</span>
   <input type="text">
 </label>
 <label>
   <span>Blah</span>
   <input type="text">
 </label>
</div>

That may look someone confusing., but if you just look at one of them.

 <label>
   <span>Blah</span>
   <input type="text">
 </label>

It makes total sense. Your span holds your text, the input is where you type. The label holds them both.
And since you have multiple:

<label><span>Blah</span><input type="text"></label>

You place those inside a box (div) too.

I would also stay away from <strong>,. there’s just no reason to use it when you have CSS.

1 Like
<p id="nobr">O’er all the hilltops
Is quiet now,
In all the treetops
Hearest thou
Hardly a breath;
The birds are asleep in the trees:
Wait, soon like these
Thou too shalt rest.
</p>

#nobr {
   white-space: pre;
}

https://jsfiddle.net/2cy7vgm4/

does same thing. But has more flexibility.

Appreciate the feedback. I didnt realize my code needed to be within the body tag. I was sort-of trying to follow the same format as FCC’s survey form they provide. Which doesnt actually have a body tag included in the html.
Worth noting - I am very much learning as I go so there’s an unending amount of info that I am missing here. Ha!

I did what you said (I think) and added the inputs and labels into one div - which is great because now the inputs are next to the labels like I wanted. But now they are off-center again!

I didnt realize that Div’s always create a new line, so that makes sense as to why the inputs were under the labels.

Here is a link to the new code:

https://codepen.io/brett-dykes/pen/LovPve

add this rule to your CSS to see where the issue is:

* {
 border: 1px solid red;
}

You’ll see there’s an extra square of space after email. That’s because the string “email” has more characters in it,. combined with its letter-spacing causes its width to ultimately be larger.

Since you’re set on using **<strong>** you now have to give those tags additional properties:

.labels > label > strong {
   min-width: 85px;
   display: inline-block;
   text-align: right;
}

Should fix your problem. I chose 85px,. because that’s the width of your longest text “email”. Inline-block causes the element to take up a block width but doesn’t push all the other elements off the same row like display: block would.

all divs have display: block that’s why you see them create a new line.

In fact, a span and div have that sole difference. span is display: inline, and div is display: block.

Don’t forget to remove the red boxes when you’re done.

1 Like

Wow super helpful! I’ll give a shot when I have some time to dive back in. I am not set on using strong at all! Just haven’t gotten to it - was so OCD on the lines that I totally forgot to edit that in CSS instead!

Can you explain to me whats going on with the arrows going from labels > label > strong? I’ve not seen that yet in code.

The <strong> element has a semantic meaning. You shouldn’t use it just for making text bold, but saying you should never use it, seems odd.

Usage notes

The <strong> element is for content that is of “strong importance,” including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.

@lasjorg

Give me an example of when you would use it., that cannot be addressed using CSS. The tag is valid html., but again it modifies style., which is what CSS should be used for.

Just think of the ‘>’ as direct elements of.

The tag STRONG is so generic that could be used anywhere. The > helps describe exactly the location of which STRONG tags I’m referring to.

The only exception I can think of is if you don’t use role attribute.

CSS does not carry any semantic meaning. Semantic HTML and CSS are not interchangeable. The link I gave has usage examples, so does the specs.

4.5.3 The strong element

The strong element represents strong importance, seriousness, or urgency for its contents.

My point is not that I think you should be using the element for styling. My point is some elements represent something semantically.