Survey Form - Help with Inline-Block

Survey Form - Help with Inline-Block
0

#1

Hey everyone,

Second time around working on these front end projects. This attempt was really typing line by line in order to understand what each line meant. I felt like I copied most of the lines the last time around.

I am a little stuck on the styling portion of this project. I started use flexbox to split up the Survey in two sides and it was not working for me. I did look at the sample project and went with inline-block, but I cannot figure out how to align the radio / checkboxes to the left.

The text fields aligned left, and I used a .margin-top (CSS) in order to align middle. Not sure if this was the correct way, but it worked so it made me feel pretty good. I originally tried text-align: middle; on the .right but that did not work.

Any help on this would be appreciated

Here is the link to my code

https://codepen.io/cvazquez08/pen/YOogOK?editors=1100


#2

Remove the padding on the UL’s


#3

Wow, didn’t realize it was that easy. I was busting my brain searching inline-block videos and topics.

Is there an easier way to center the text fields without adding the 5px padding to the .left ID?


#4

Your layout is still going to break on small screens because of the way you are doing things.

My advice going forward, if you are not sure how to do the css, don’t code out all the HTML. Try making just part of the layout bit by bit. One label and input, play with the css, check the layout on different screen sizes, then add the radio buttons, test it out, then add the checkboxes etc.

It will take quite a bit of a rewrite, but I would group the labels and inputs inside the same container, remove all the left/right styles and the .margin-top

Summary
<!-- from -->
<div class="left">
  <label id="name-label" for="name">* Name: </label>
</div>
<div class="right">
  <input id="name" class="margin-top" type="text" required  placeholder="Enter your Name">
</div>
<!-- to -->
<div class="input-container">
  <label id="name-label" for="name">* Name: </label>
  <input id="name" class="margin-top" type="text" required  placeholder="Enter your Name">
</div>

You will need to do more, but that is the point of the exercise, as you struggle you learn. You might want to fork your project and work on the fork, keep the one you have now just in case you want to go back to what you had.


#5

Thanks for the reply.

My purpose was to challenge myself and recreate the sample project due to the split screen function of the page.
After reviewing the code and other projects alike, it looks like most of them are labeled with left / right styles (or similar).

Responsiveness is definitely a subject i’m not comfortable with yet, and will start researching so i can come back to this project.

Any tips would help and appreciated.

Thanks again.


#6

If you look at the sample project, you can see they are doing exactly what i suggested you do. i.e. give the label and input the same container (rowTab). It is just that the label and input also have their own parent container as well (.labels and .rightTab).

<div class="rowTab">
  <div class="labels">
    <label id="name-label" for="name">* Name: </label>
  </div>
  <div class="rightTab">
    <input autofocus="" type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required="">
  </div>
</div>

#8

Deleted my previous comment.

I answered my own question thinking about it.

I took your advice and started writing the HTML section by section and styling it making sure it was responsive. Doing this, i answered my own question regarding the parent container.

Thank you for your help!

#CodeNewbie


#9

Well i wrote this but i can see i was too late, i will post it anyway.

This id=“form-outer” div is used to give size and position to the form itself, it does not affect the alignment of the inputs and labels.

.rowTab is a block level element, as long as what is inside fits its width they will be on the same line.

  1. Open the sample project in Chrome.

  2. Right click the Name label and from the context menu select Inspect.

  3. In the right view that opened hover over the .rowTab div with your mouse. The blue box you see highlighted on the page is the div, you can see it is almost as wide as the form (minus the padding on id=“form-outer”).

  4. Now in the right view, click on the .rightTab div, look all the way to the right you can see it’s styles. Where is says width: 48%; click into the 48% so it gets selected.

  5. Now use your up arrow key on the keyboard, it will increase the number. Watch the page as you increase the number, at some point there is not enough room in the containing div and the label and input will go to separate lines in the div.

Maybe this was helpful, maybe it was just a wall of text, but i just wanted to post it.


#10

Definitely helped.

Thank for all the tips, really appreciate the help.

Here is the new link - responsive when minimizing the screen :slight_smile:


#11

Much better, good job.

  1. Move the break point to (max-width: 890px) your inputs are overflowing the form

  2. At 515px you have a problem again, an easy solution is to set the container to 100% width. At really small screen sizes (315px) it breaks again but i would just set a min-width: 320px; on the form and be done.

@media(max-width: 515px) {
  .container {
  width: 100%;
  }
}