GM Application - Survey Form

GM Application - Survey Form
0

#1

Hi

I’m trying to align my labels with my form fields and having no luck
Any suggestions appreciated
Thanks
Don


#2

Currently, your labels class has:

text-align: right;

Try aligning to the left instead to see if that is what you are wanting.


#3

Thanks
I’m looking to make two columns
One for the labels on the left and the fields on the right in alignment with the proper partner


#4

You have the right structure to do this, but your CSS is not correct to do this. Also, all html element attribute values should be surrounded by either single or double quotes. I see the following on your label:

<div class= labels>

This can cause odd things to happen, so make sure you write class=“labels”.

Another syntax issue is your use of the id attribute on your elements. Ids are supposed to be unique to the document, so you should never see one element with id=“right-col” and another element in the same document with id=“right-col”. You can specify the same class value to another element, but not id. Some browsers let you get away with it, but others can cause strange display issues.

So let’s fix one of your divs which holds a label element and input element.

    <div class="rowTab">
      <div class="labels">
        <label for="address">* Address: </label>
      </div>
      <div class="right-col">
        <input type="number text" name="address" id="address" class="input-field" placeholder="Enter Your Address" required>
      </div>
    </div>

I corrected the syntax for the label class div and I changed id=“right-col” to class=“right-col”. Now you just need to figure the correct CSS to accomplish what you want. I would take a look at the CSS Flexbox part of the curriculum and see if you can figure out how to use it with your fixed structure.