Keeping css attributes in an iterated dart template

Question

I'm working on a Dart project where the user is able to add new custom elements at the click of a button. Each custom element is a div containing a table. The divs are resizeable by the user. My problem is that after a new element is added to the list of elements held by my dart file, the sizes of all the divs are automatically reset. Is there any way to add new elements to the template while keeping the attributes of the old ones the same?

Here is my CSS code that deals with the main divs in my custom element:

#superDivContainer {
  border: 2px solid black; 
  resize: both;
  display: inline-block;
}

#tableContainer {  
  height: 125px;
  overflow: scroll;
}

Thanks in advance for the help!

Answer 1

When you change the backing list, the template reiterates, destroying all the old elements and recreating them from scratch, so all user resize information is lost.

When you add a new item to the list, you can store all the sizing information of the old elements and then after the item is added set the new elements size:

// Stores size information
List<List> sizes = [];

void add() {
  // Store the old sizes
  sizes.clear();
  ElementList divs = queryAll(".superDivContainer");
  for(int i = 0; i < divs.toList().length; i++) {
    Element div = divs[i];
    sizes.add([div.style.width, div.style.height]);
  }

  // Add the new item
  yourList.add("new");

  // Set the sizes of the new elements
  Timer timer = new Timer(new Duration(milliseconds: 1), () {
    divs = queryAll(".superDivContainer");
    for(int i = 0; i < divs.toList().length && i < sizes.length; i++) {
      Element div = divs[i];
      div.style.width = sizes[i][0];
      div.style.height = sizes[i][1];
    }
  });
}

Two notes:

• I changed superDivContainer to be a class instead of an id since it seems that you are applying it to multiple elements; you will need to change your CSS reflect that
• The 1 millisecond timer gets around the fact that there is a tiny delay until the new elements are added and accessible