Two divs with the same class name overlapping each other

Question

When a button is clicked, my program will create a dynamic div with the class name dynamictextbox . There is a label with the class name mytxt and a text box with the class name mytext inside this div , which is also dynamically created.

When I create a new dynamic div , it overlaps with the previously created div .

Below is the CSS that I used

 .dynamictextbox{ width:50%; position:relative; padding:10; } .dynamictextbox .mytxt{ position:absolute; left:0px; right:50%; } .dynamictextbox .mytext{ position:absolute; left:51%; right:100%; } 

Below is the HTML code

  <div id="Enter your name" class="dynamictextbox"> <label class="mytxt">Enter your name</label> <input type="text" name="Enter your name_name" id="Enter your name_id" class="mytext"> </div> <br /> <div id="bigData" class="dynamictextbox"> <label class="mytxt">Now this is a long text which will overlap the next div.Need solution for this. Please give me a solution for this</label> <input type="text" name="bigData_name" id="bigDate_id" class="mytext"> </div> <br /> <div id="div_temp" class="dynamictextbox"> <label id="txtlb" class="mytxt">Dynamic Label</label> <input type="text" name="tb" id="tb" class="mytext"> </div> <br /> 

Answer 1

Here you need to expand the element according to the height of the content. Unfortunately, you cannot do this with CSS. Therefore, we will have to move with javascript.

Here is the script

 <script> var max = 0; function setHeight() { var elements = document.getElementsByClassName('mytxt'); var height = 0; for (var i = 0; i < elements.length; i++) { height = elements[i].scrollHeight; if (height > max) { max = height; } } elements = document.getElementsByClassName('dynamictextbox'); for (var i = 0; i < elements.length; i++) { elements[i].style = "min-height: " + max + "px"; } } </script> 

At the end of the whole div call funtion setHeight() .

 <script>setHeight()</script> 

Thus, the result will look like this:

PS I added borders for the dynamictextbox class for testing purposes.

Answer 2

Update the code below. Is that what you do after?

 $("#add").on("click", function(){ // just a helper function for some random content function dynamicText(){ var min = 1; var max = 50; var random = Math.floor(Math.random() * max) + min; var text = ""; for(var i = 0; i < random; i++){ text += "text "; } return text; } // add to the container var addMe = "\ <div class='dynamictextbox'>\ <label class='mytxt'>"+dynamicText()+"</label>\ <textarea class='mytext'>"+dynamicText()+"</textarea>\ </div>\ "; var container = $("#container"); container.append(addMe); }); 

 .dynamictextbox{ width:50%; padding:10; margin-top: 10px; background: #CCC; overflow: auto; } .dynamictextbox .mytxt{ position: relative; float: left; width: calc(50% - 10px); } .dynamictextbox .mytext{ float: right; width: calc(50% - 10px); height: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> On clicking a button my program will create a dynamic div with a class name dynamictextbox . There is a label with the class name mytxt and textbox with class name mytext inside this div which is also dynamically created. <br><hr><br> <button id="add">ADD</button><br><br> <div id="container"></div> 

Answer 3

It may be useful - JSFIDDLE
Just remove the .mytxt class from your CSS and increase the left attribute of the .mytext class

 .dynamictextbox .mytext{ position:absolute; left:60%; right:100%; }