CODEWITHSUNDEEP
javascripthtml
Malo
Malo

Reputation: 1586

why scrolling is disabled when i add new element in javascript dynamically

i have in my code a add button when i click on it a new div element is added to the layout, the problem is when i add multiple rows dynamically the scroll of the page is not working

below how i add the element on button click

function add(event) {

  event.preventDefault();  
      var deletebutton =  document.createElement("button");

    deletebutton.addEventListener("click",function(evt){
      deleterow(evt,'div' + i + '')
      });


 var newDiv = document.createElement("div");
 newDiv.className="form-group";
 newDiv.id="div" + i;

 newDiv.appendChild(deletebutton);
 
  document.getElementById("tab_logic").appendChild(newDiv);

  }

below the code of button i click to add dynamically the row

<button id="add_row" style="background-color:#90EE90;"  onclick="add(event)" >
                             
                          </button></div>

Upvotes: 0

Views: 471

Answers (1)

Ben
Ben

Reputation: 57287

document.getElementById("tab_logic")

This is the element you probably want to look at. There's a couple of things that could be happening:

  • The element you're adding is position: absolute so it's not part of the element layout, so the element doesn't know it needs to scroll
  • #tab_logic has the overflow: hidden style set, or no overflow style set, perhaps it should be overflow: auto
  • Your #tab_logic element's parent could also have these same problems: follow it up the tree and make sure there's not an absolute layout or an overflow setting somewhere that's causing the problem.

Upvotes: 1

Related Questions