6 jun
2017

How to avoid Overlapping with other element while dynamic adding and removing of textarea?

First of all i apologize for lengthy explanation. I know this kind of question have answered so many times, and i have gone through some other post also,but none of the approach works for me.

Some where i am missing something, which i am not unable to fix this part. It will great help if someone can point it out what exactly is going wrong.

Basically i have followed this link to start up to add and removing textarea dynamically:-

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

But i have modified the code as per my requirement. i have attached 3 images to demonstrate what i was doing

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

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

I tried by changing position and overflow,but nothing seems to work

Ok i am trying to fix this part of the code where i am having one default textarea and dynamically user can add and remove,but whenever i am trying to add new textarea, all previous textarea position is moving upwards and going beyond the range of this attribute

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

Now when i am dynamically adding the textarea, it is going beyond the td area

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

this is my 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;
}

My JS Code for adding and removing the 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));
            });
    });

What i am looking out is to make the dynamic textarea fixed so that whenever any textarea got added it should not move and it should append at the bottom

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation