Build a Survey Form -- Formatting

Build a Survey Form -- Formatting
0.0 0

#1

I’m building my own survey form, however, I’m having issues understanding how the sample survey form did the formatting. Specifically, how did they center both the inputs and labels, and how did they align it in the center. Here is mine as an example.

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form


#2

Hi @dkang17 your project looks great! If you mean, “how did they center all of the elements inside a box”, they did so by styling the <form> tag with max-width and margin.

max-width will determine how big you want the container to be. However, then you have a problem because the container won’t be centered yet.

Then, you use margin and provide the left and right sides with the auto setting. This should center your element.

Note: I recommend adding a background so that you can see whether it’s correctly centering.


#3

Thanks for the quick reply @nicknish! I think I might be asking something slightly different. In the example, it looks like they created two boxes, one for the labels (name, email, etc.) and another for the input boxes. They then justified the labels to the right, and the input boxes to the left.

My question is how did they get this “two column” setup? My labels/input boxes seem to move as one.


#4

Hi @dkang17. That’s a great question.

There’s a lot of ways to make this possible, because it’s essentially a 2-column layout. Each of the following methods have their pros and cons.

  1. Inline-block layout (they use this)
  2. Float-based layout
  3. Flexbox layout

They achieved it like so:

<div>
  <div class="labels">
    <label>Label</label>
  </div>
  <div class="rightClass">
    <input type="text" />
  </div>
</div>
.labels {
  display: inline-block;
  text-align: right;
  width: 40%;
  padding: 5px;
  vertical-align: top;
  margin-top: 10px;
}

.rightTab {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}

Codepen

If you ever want to look at someone else’s CodePen code, you can change the view to the Editor view to study their code. That’s one of the biggest benefits of CodePen and its community!

CloudApp


#5

Thanks for the help here! I figured out my issue. I did have inline set, but the width percentage was set too high between my two columns, so they were overflowing to the next line. Using your trip with the setting the background colors of each div helped me see that. Thank you!