Grid Panel with 7 columns

Anvil Q&A
1

Hey! I’m trying to populate a Grid Panel with 7 columns. This is doable of course, the problem is that the columns do not fill the whole width of the grid so an ugly space is left in the rightmost part of it.

I’ve tried fiddling with css, adjusting width_xs to a decimal number… nothing works.

Is this even possible with Grid Panels? Should I use another component?

Code Sample:

  def setup_calendar(self):
    self.grid_panel_1.clear()
    days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    local_tz = anvil.tz.tzoffset(hours=-6)
    start_datetime = datetime.datetime.combine(self.start_date, datetime.time(12, 0)).replace(tzinfo=local_tz)
    
    # Calculate the date range for the week
    week_start = start_datetime.date()
    week_end = week_start + datetime.timedelta(days=6)
    date_range = f"{week_start.strftime('%d/%m/%Y')} - {week_end.strftime('%d/%m/%Y')}"
    
    # Add the date range to the top of the calendar
    self.grid_panel_1.add_component(
      Label(text=date_range, bold=True),
      row="0",
      col_span=7  # Span across all columns
    )

    
    # Add day headings
    for col, day in enumerate(days):
      date = (start_datetime + datetime.timedelta(days=col)).date()
      self.grid_panel_1.add_component(
        DayHeading(days_range="{0}".format(date.strftime('%d/%m'))),
        row=1,
        col_xs=col,
        width_xs=1
      )

    # Add hour cells
    current_datetime = start_datetime
    for row in range(8): 
      for col in range(7):  # 7 days of the week
        cell_datetime = current_datetime + datetime.timedelta(days=col)
        cell_component = self.get_cell_component(cell_datetime)
        
        self.grid_panel_1.add_component(
          cell_component,
          row=row + 2,  
          col_xs=col,
          width_xs=1
        )
      current_datetime += datetime.timedelta(hours=1)
2

Welcome to the Forum!

Yes, it’s possible. Many components have a full_width_row property. When you set it to True, it will grow as wide as its parent allows. So you may have to work your way up the component tree, setting full_width_row accordingly.

You can do all of this directly in the IDE, but you may have to scroll the Component Properties panel, and expand some of its topic areas, to see each component’s full_width_row property (when it has one).

1 Like
3

Thanks I’ll give it a go

4

Did this work for you, or did you find another solution?

5

No it didn’t. I ended up using a Flow Panel instead of a Grid Panel. Easier to manipulate.