Drag and Drop Trello Clone

Thanks @mark.breuss - I can get the column width quite easily, and land the first column on the left. For the right hand side I’m trying to get the columns to stack on top of one another with gaps between them, but they all seem to land in the same place, even when I adjust their y_value.

#create grid
    for col_idx,list_of_items in enumerate(self._items):
      if col_idx == 0:
         x_value = 0
         width_value = 200
         y_value = 0
      else:
        x_value = 200 + self.column_spacing
        width_value = 600
        y_value = (0 + self.height)*col_idx
      #x_value = (self.column_width+self.column_spacing)*col_idx
      #print(x_value)
      #width_value = self.column_width
      #y_value = 0
      #Header
      if self.header_components:
        self.grid_panel.add_component(self.header_components[col_idx],width=width_value,x=x_value,y=y_value)
        y_value = (self.header_height + 200 )*col_idx

Do you know if there’s a way to:

  • Force the columns to sit underneath one another
  • Ensure even empty columns have height
  • create a gap between the “rows” of columns, and;
  • allow the height to auto-adjust depending on how many items have been dropped into the column?

FYI this is what the outcome looks like from the code above:

I presume I’m moving the y_value down (hence column 2 starts at 240px) but the column height is overlapping to the next column that’s supposed to start at 480px

–edit—
I seem to have managed to get these items to start behaving:

    #create grid
    for col_idx,list_of_items in enumerate(self._items):
      if col_idx == 0:
         x_value = 0
         width_value = 300
         y_value = 0
         if self.header_components:
          self.grid_panel.add_component(self.header_components[col_idx],width=width_value,x=x_value,y=y_value)
          y_value = self.header_height
      elif col_idx == 1:
        x_value = 300 + self.column_spacing
        width_value = 1000
        y_value = 0
        self.height = 250
        if self.header_components:
          self.grid_panel.add_component(self.header_components[col_idx],width=width_value,x=x_value,y=y_value)
          y_value = self.header_height
      else:
        x_value = 300 + self.column_spacing
        width_value = 1000
        self.height = 250
        y_value = (self.header_height + self.height)*(col_idx - 1)
        if self.header_components:
          self.grid_panel.add_component(self.header_components[col_idx],width=width_value,x=x_value,y=y_value)
          y_value = (self.header_height + self.height)*(col_idx - 1)
          print(y_value)

Although for some reason the Header disappears when I use the line:

y_value = (self.header_height + self.height)*(col_idx - 1)

To try and land the header itself in the white space between the column rows for putting the items

I also needed to tweak the Form settings to give us more space (it would be great if this would auto-resize depending on the content):
image

1 Like