Vermeidung von Überlappungen mit anderen Elementen beim dynamischen Hinzufügen und Entfernen von Textbereichen?

Als erstes entschuldige ich mich für eine längere Erklärung. Ich weiß, diese Art von Frage haben so viele Male beantwortet, und ich habe auch einen anderen Beitrag durch, aber keiner der Ansatz funktioniert für mich.Vermeidung von Überlappungen mit anderen Elementen beim dynamischen Hinzufügen und Entfernen von Textbereichen?

Einige, wo ich etwas vermisse, das ich nicht in der Lage bin, diesen Teil zu reparieren. Es wird sehr hilfreich sein, wenn jemand darauf hinweisen kann, was genau falsch läuft.

Im Grunde habe ich diesen Link gefolgt zu starten hinzuzufügen und zu entfernen TextArea- dynamisch: -

https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery

Aber ich habe den Code als pro meine Anforderung geändert. Ich habe 3 Bilder angehängt zu zeigen, was ich scheint

Click on this link to see the attached image this is by Default textarea

tun wurde

On clicking +(plus) button i added new textarea,This is where textarea starts moving

Here when i added 3rd textarea add button position changed and text area were moved out and overlapped with label name

Ich habe versucht, von Position und Überlauf zu ändern, aber nichts

Ok zu arbeiten i Ich versuche, diesen Teil des Codes zu reparieren, wo ich einen Standardtextbereich habe und dynamisch Benutzer hinzufügen und entfernen kann, aber immer wenn ich versuche neues Textfeld hinzuzufügen, die all vorherige Textfeld Position nach oben bewegt und über den Bereich dieses Attributs

<td id="ui-selected-xpath"> 
    <div class="input_fields_wrap"> 
     <img class="add_field_button" src='images/new.png' width='16' height='16'/> 
    <div class="ui-xpathDiv-forTextArea"> 
     <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"> 
    </div> 
</div> 
</td>

Jetzt gehen, wenn ich dynamisch bin das Textfeld hinzufügen, es wird über den td Bereich geht

Mein HTML-Code : -

<body> 
    <div id='adding-app' title='Add New Xpath'> 
     <div id='editor-app'></div> 
     <div align='center'> 
      <form> 
       <fieldset> 
        <div id='tue' title='Add Xpath'> 
         <div id='editor-xpath'></div> 
         <div align='center'> 
          <table> 
           <tr> 
            <td> 
             <label for='app_name0'><b>Xpath Request : 
             </b></label> 
             <p id="demo"></p> 
            </td> 

           </tr> 
           <tr> 
            <td> 
             <textarea id='Xpath' readonly></textarea> 
            </td> 
            <td id="ui-selected-xpath"> 
             <div class="input_fields_wrap"> 
              <img class="add_field_button" src='images/new.png' width='16' height='16'/> 
              <div class="ui-xpathDiv"> 
               <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"> 
              </div> 
             </div> 
            </td> 
           </tr> 
          </table> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</body>

das ist mein CSS-Code:

#Xpath{ 
    width: 351px; 
    height: 349px; 
} 

#ui-selected-xpath{ 
    border: 1px solid black; 
} 

.add_field_button{ 
    position: relative; 
    float:left; 
    bottom:110px; 
    left:266px; 
} 
.ui-xpath{ 
    position: relative; 
    float:left; 
    bottom:135px; 
    resize: none; 
    height: 2em; 
    width: 20em; 
} 
.ui-xpathDiv{ 
    margin-bottom: 16px; 
    background-color: red; 
    max-width: 100%; 
    max-height: 100%; 
} 
#xpathGrade{ 
    margin-bottom: 16px; 
    resize: none; 
    height: 2em; 
    width: 20em; 
} 
.ui-xpath{ 
    position: relative; 
    float:left; 
    bottom:135px; 
    resize: none; 
    height: 2em; 
    width: 20em; 
}

Mein JS-Code für das Hinzufügen und Entfernen des TextArea-

$(".add_field_button").click(function(e){ //on add input button click 
     isFirstElementFocused =false; 
     x++; //text box increment 
     $(".input_fields_wrap").append(
       '<div class="ui-xpathDiv" id="xpathDiv_'+x+'"><textarea id="xpathGrade_'+x+'" type="text" class="ui-xpath" name="mytext[]" /><img class="remove_field" src="images/remove.png"/></div>' 
     ); 
    }); 

    $(".input_fields_wrap").on("click",".remove_field", 
     function(e){ //user click on remove text 
      e.preventDefault(); 
      checkDuplicateXpath.remove($(this).prev().val()); 
      x--; 
      $(this).closest("div").remove(); 
      $(".ui-xpathDiv").each(function() { 
       x = Number(this.id.substring(this.id.indexOf("_") + 1)); 
      }); 
    });

Was soll mit Blick i ist das dynamische Textfeld festgelegt, so dass, wenn jede Textarea er sich nicht bewegen konnte hinzugefügt und es sollte an der Unterseite

Quelle

2017-05-31 Uday Konduru

Ihre xpathGrade anhängen textarea wird nicht geschlossen. z.B. <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"> sollte <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"></textarea> sein. Dies könnte sein, was den Renderfehler verursacht.

Der Textbereich, den Sie in Ihrem jQuery erstellen, wird auch nicht geschlossen.

EDIT:

Versuchen Sie, Ihre CSS diese zu ändern, sowie die Textbereich ändert.

<style media="screen"> 
    #Xpath{ 
     width: 351px; 
     height: 349px; 
    } 

    #ui-selected-xpath{ 
     border: 1px solid black; 
     vertical-align:top; 
    } 

    #ui-selected-xpath img, #ui-selected-xpath textarea { 
     display: inline-block; 
     vertical-align: middle; 
    } 

    .add_field_button{ 
     position: relative; 
    } 
    .ui-xpath{ 
     position: relative; 
     resize: none; 
     height: 2em; 
     width: 20em; 
    } 
    .ui-xpathDiv-forTextArea{ 
     margin-bottom: 16px; 
     background-color: red; 
     max-width: 100%; 
     max-height: 100%; 
    } 
    #xpathGrade{ 
     resize: none; 
     height: 2em; 
     width: 20em; 
    } 
    .ui-xpath{ 
     position: relative; 
     resize: none; 
     height: 2em; 
     width: 20em; 
    } 
</style>

Auch diese erste Bild-Taste innerhalb der ui-xpathDiv.

<div class="ui-xpathDiv"> 
    <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"></textarea> 
    <img class="add_field_button" src='images/new.png' width='16' height='16'/> 
</div>

Quelle

2017-05-31 14:48:29 WizardCoder

WizardCoder Ich habe das auch versucht, aber nicht funktioniert –

Ich habe meine Antwort aktualisiert. Das Problem scheint mit dem CSS zu sein. – WizardCoder

Hey danke für deine Antwort, das bestehende Problem wurde gelöst, aber jetzt, wenn ich dynamisch neue Textarea Textarea definiert in tr auch anfangen zu bewegen, hast du eine Idee, wie die Höhe von tr zu beheben und zu erweitern –

Vermeidung von Überlappungen mit anderen Elementen beim dynamischen Hinzufügen und Entfernen von Textbereichen?

Antwort

Verwandte Themen