Help me in my survey form

1

I have a problem in aligning the survey form even if I use transform also .Please see my project.It’s ok,project has been finished but I can’t align it as in the sample one.Here(https://codepen.io/Saikrishnasaki/pen/rEvyzO) is the link to the codepen project.Please help me.

2

You can always change the samples view to editor and look.

With grid or flexbox you can create to columns and align the elements.

Before those were available we faked the look of a column by putting each label and input in it’s own row divided exactly in half. Left-side right aligned and right-side left aligned.

Your choice.

3

I tried the same alignment left elements to right and right elements to left but it doesn’t work for first three labels.

4

Ok, I didn’t fix all of it, but I did fix the top bit and I have general advice for how to fix the rest:

  1. As can be seen in the fork, tidy HTML is key to finding where problems are. A lot of the alignment issues arose from missing closing </div> tags or divs not wrapping around what they should be wrapped around. A useful shortcut you can use (although just coding clean code from the get go would be ideal), is clicking “Tidy HTML” in the following:
    image

  2. If you code it right you shouldn’t have to transform individual parts around by some number of pixels. Rather you should be moving whole blocks around. In the above code, I got rid of the following in the CSS:

#name{
  transform:translate(220px);
}
#email,#age{
  transform:translate(100px);width:150px;
}
  1. Optional advice: I’m not sure exactly how you approached coding this, but I think you should code one piece at a time, e.g. code from top to bottom and don’t move on until each part is the way you want it to be. That way if problems arise, you can solve/ask for help on them one at a time, vs. letting it build up until the end.
1 Like
5

Thanks for your effort,but still there’s an alignment problem.
That tidy html is doing nothing.I have removed the transform properties also.

6

And everything is closed correctly.

7

You need three more closing div tags. Notice that your form inputs move farther and farther right. Not only can this be caused by continuously subdividing the same space with CSS, but also, as in your case, not closing all the divs.

Tidy only affects the indentation of the source code to make it easier to find mistakes. It doesn’t affect the rendered page.

You need to pay attention to which items are block items and which items are inline items.

  • margin moves block items

  • text-align moves text and other inline items

After all this, you’ll be ready to work on aligning the form elements.

1 Like
8

Thanks for giving me your time.It solved my problem.

1 Like
9

How about this?

saikrishnaSurvey
saikrishnaSurvey1503×967 119 KB

10

hey…how did you do that?
adding width doesn’t give me that…

11

The code is in the picture make it full size. If your screen is small zoom in. There are lots of pixels.

12

That code doesn’t explain that.

13

Sorry for not responding sooner. I stopped receiving email on this post. In the screenshot I made minimal changes to your HTML like removing certain classes. Also, setting the size of the textarea should be done with rows and cols attributes not height and width.

1 Like