How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?


Tags: javascript,css,arrays,for-loop,alignment

Problem :

What I am trying to do is generate HTML with JavaScript using loops and arrays. What I am currently trying (and having issue with) is my second column. I have an array of courses to that are placed into input checkboxes followed by labels. From there I used an if statement to add breaks after every second iteration to create my columns. My problem is getting the second column to align vertically. I wanted to do it using just JS and not CSS, but I am open to either.

Since my question has multiple parts, I wasn't sure what keywords to use to use to narrow my search for aligning columns using .createElement in a loop to create 2 columns and align them vertically in JavaScript, so if this has been answered in another place, feel free to drop a line.

Here is the relevent code.

HTML

<body>
<section id="wrapper">
<form action="POST" novalidate="novalidate">
<fieldset id="contactInfo">
<legend>Contact Info</legend>
<label>Name: </label>
<input type="text" placeholder="John" required autofocus /><br>
<label>Email: </label>
<input type="email" name="email" placeholder="galacticDonut@yahoo.com" required /><br>
<label>Age: </label>
<select></select>
</fieldset>

<fieldset id="Programs">
<legend>Programs</legend>
<ul></ul>
</fieldset>
</form>

JavaScript

//************************
//Generate course options list

function generateCourses() {
    var courseOptions =  ["CSCI","CSIA","DBMS","INFA","ITSP","NETI","SDEV","SVAD"]
    courseOptions.sort();

    var uList = document.getElementsByTagName("ul")[0];

    for (var i=0; i<courseOptions.length; i++) {
    //Create inputs
    var labels = document.createElement("label");
    labels.innerHTML = courseOptions[i];

    var inputs = document.createElement("input");
    inputs.setAttribute("type", "checkbox");
    //Set input value
        inputs.value = courseOptions[i];
    //Set input text
        inputs.text = courseOptions[i];
    //Put input in UL
        uList.appendChild(inputs);
    //place label in ul after checkboxes
        uList.appendChild(labels)
        if (i % 2) {
            var breakLine = document.createElement("br");
            uList.appendChild(breakLine);
        }//End if
    }//End for loop
} //End generateCourses function

Here is the full code https://jsfiddle.net/gat4vo9p/2/



Solution :

I changed your code a bit:

https://jsfiddle.net/gat4vo9p/7/

Added an li element inside ul. Each li behaves like a table row.

ul {
  list-style: none;
  position: relative;
}

li {
  display: table;
  width: 100%;
  height: 30px;
  vertical-align: middle;
}
li > span {
  display: table-cell;
  width: 50%;
}

Also added <label for attribute. So clicking on the label will mark/unmark the checkbox, as well.


    CSS Howto..

    how to show css text in html div

    How can I use True Type Collection (.ttc) in JavaFX?

    How to style form use css [closed]

    Using CSS or Java to Show or Hide Empty Content Area

    How to make this breed of resizable vertical divider for two divs?

    CSS how to make 100% height in this case

    how to create Active State in CSS Navigations

    ASP.Net MVC: How to use razor variable in CSS file

    How to position CSS Ribbon to go over one table cell

    Attempting to show logo using 'content' from CSS

    How to render css code from php var without page refresh?

    How to draw random lines with CSS to replicate effect [closed]

    How to make comment shape using css

    How to avoid double borders on list of divs

    Codeigniter--add “active” css class to link, how to?

    HTML/CSS: How to move my navigation bar to the middle?

    How to fire a new css animation when the element already has one?

    How to change the background colour of a QWidget inside QStackedWidget using css?

    How to neutralize CSS definitions without overriding

    How can I center vertically a div in bootstrap?

    How to make dropdown hide when clicked anywhere outside of it?

    How do I gather a class' css attributes given nothing but the className?

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to make a full width sub-menu [closed]

    how to get text beside image button using CSS

    How to design a web page with multiple color panes without tables [duplicate]

    How can I adjust image width and height to 100 x 100 keeping ratio?

    How to set parent div height to self adapt to the inner div height?

    How to get same height to two sibling buttons

    How to overlay a dynamically selected image over a dynamically populated div