兩個同名類重疊的div

點擊一個按鈕，我的程序會創建一個動態的div，其類名爲dynamictextbox。有一個label與類名稱mytxt和文本框mytext類div這也是動態創建。兩個同名類重疊的div

當我創建一個新的動態div它與以前創建的div重疊。

下面是CSS我用

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

下面是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 />

來源

2017-04-22 manikandan

嗨亨利我添加了我的html代碼。 – manikandan

您是否使用Ajax調用獲取動態數據？ –

我真的不明白你的問題。你想修復div重疊？只是簡單的刪除位置：絕對:)這裏是我的例子https://jsfiddle.net/edsoaxLu/ –

更新下面的代碼。這是你在哪裏追求的？

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

來源

2017-04-22 04:58:37 Icewine

感謝您的建議，但當標籤獲得一個更長的文字insted只是一個單詞動態它會重疊下一個div – manikandan

嘗試，我改變了代碼 – Icewine

這可能是有益的 - JSFIDDLE
剛剛從你的CSS刪除.mytxt類，並增加.mytext類

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

來源

2017-04-22 05:09:12

哥們是一個有趣的答案，但是當標籤文本很長時，它會放在文本框後面。在這種情況下，我希望將標籤文本分解爲下一行。 – manikandan

左側屬性，你需要在這裏什麼，是根據內容高度來擴展元素。不幸的是，你不能使用CSS來做到這一點。所以我們必須隨着javascript一起移動。

這裏不用腳本

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

在所有div年代末叫funtion setHeight()。

<script>setHeight()</script>

那麼輸出將看起來像這樣

附：爲了測試目的，我已經爲課程dynamictextbox添加了邊框。

來源

2017-04-22 10:45:12

兩個同名類重疊的div

回答

相關問題