Dwa elementy div o tej samej nazwie, zachodzące na siebie,

Question

Po kliknięciu przycisku mój program utworzy dynamiczny kod div o nazwie klasy dynamictextbox. Istnieje label o nazwie klasy mytxt i polu tekstowym o nazwie klasy mytext w tej klasie div, która jest również dynamicznie tworzona.

Kiedy tworzę nowy dynamiczny div, nakłada się on na wcześniej utworzony div.

Poniżej CSS Użyłem

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

Poniżej znajduje się kod HTML

<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

Aktualizacja poniższy kod. Czy to właśnie robisz?

$("#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 2

To może być pomocne - JSFIDDLE
Wystarczy usunąć klasę .mytxt z CSS i zwiększyć lewy atrybut .mytext klasy

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

Answer 3

Co trzeba tutaj , jest rozszerzenie elementu zgodnie z wysokością zawartości. Niestety nie można tego zrobić za pomocą CSS. Musimy więc przenieść się wraz z javascript.

Tu idzie skrypt

<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> 

Na koniec wszystkich div s wywołać funtion setHeight().

<script>setHeight()</script> 

Więc wyjście będzie wyglądać następująco

PS: Dodałem granice do klasy dynamictextbox do celów testowych.