Theodore Steiner Theodore Steiner - 2 months ago 9
CSS Question

Aligning Dynamic Inputs

Hi I realize this question has been asked a few times, but, I still cannot seem to duplicate the working results.

I'm trying to align dynamically created divs but I think I'm missing something fundamental.

I'm just trying to have a little space in between each input, but I don't understand how to target what is going to be the newly created element in the css.

Any help would be appreciated. Essentially I am just trying to line them up beneath each other, but I'd like to be able to manipulate this to eventually mix with other css.

Link: http://codepen.io/theodore_steiner/pen/mArAGv

HTML:

<div id="fullName">
<p>Full Name</p>

<input type="text" name="firstName_1" />

<input type="text" name="middleName_1" />

<input type="text" name="lastName_1" />

</div>

<input type="button" id="myButton" onclick="addName()" value="+" />

CSS:

*
{
margin: 0;
padding: 0;
}

p
{
float: left;
margin-right: 30px;
}

input
{
margin-right: 10px;
margin-bottom: 10px;
}

#fullName
{
margin-left: 30px;
}

JS:
var i = 0;

function addName()
{
if(i <= 3)
{
var div = document.createElement("div");
div.innerHTML = '<input type="text" name="firstName_'+i+'"><input type="text" name="middleName_'+i+'"><input type="text" name="lastName_'+i+'">';

document.getElementById("fullName").appendChild(div);
}
};

Answer

Well, I just tried to handle using CSS.

var i = 0;

function addName()
{
	if(i <= 3)
	{
		var div = document.createElement("div", {class:"containerDiv" });
		div.innerHTML = '<div class="left"><input type="text" name="firstName_'+i+'"> <input type="text" name="middleName_'+i+'"> <input type="text" name="lastName_'+i+'"></div>';
		
		document.getElementById("fullName").appendChild(div);
	}
};
*
{
	margin: 0;
	padding: 0;
}

.containerDiv{
	margin: 90px;
}

#fullName
{
	display:table;
}

p
{
	float: left;
	margin-right: 30px;
}

input
{
	margin-right: 10px;
	margin-bottom: 10px;
}

#fullName
{
	margin-left: 30px;
}

.left
{
	margin-left: 99px;
}
<div id="fullName">
<p>Full Name</p>

<input type="text" name="firstName_1"  />
	
<input type="text" name="middleName_1" />	
	
	<input type="text" name="lastName_1" />
	
</div>

<input type="button" id="myButton" onclick="addName()" value="+" />

http://codepen.io/vikash2402/pen/vXJXqP

Hoping this will help you :)

Comments