Question 45914 in CSS Question posted in
Some basic documentation can be found here.

Column with Expandable Cards that contain a List – CSS

I am trying the build the following layout. Imagine a Column with 4 expandable Cards (see image). A collapsed card contains only a title and is hence rather small. When expanded a list appears which can contain any amount of elements. Using Instrinsic Height on every Card results in an overflow if the sum of all tables of the expanded cards becomes to big. Using Expanded results in Cards with 0 or only a few elements to take space that they dont need. I also tried Flexible. I would like that every collapsed card gets the space it needs. And then the remaining space is shared evenly between all lists of the expanded(!) cards if any. But every list only takes the space it needs(!) So that the larger lists can take more space if any. If for example all lists are very big and are all expanded every expanded card should take 1/4 (assuming 4 cards) of the column.

enter image description here

Tags:

2

Answers


  1. 0

    You can try to wrap the whole column ( the main column) in SingleChildScrollView, so that overflow will not come.

    Login or Signup to reply.
  2. 0
    1. Use a Column widget to contain the four cards.
    2. Use a Flexible widget to wrap each card so that it takes up the
      minimum space it needs when collapsed.
    3. Use a LayoutBuilder widget to get the available height for the
      column. When a card is expanded, calculate the height of its
      contents and subtract the collapsed height from the available height
      of the column.
    4. Distribute the remaining space evenly between the expanded cards
      that need it, using a FractionallySizedBox widget with a
      heightFactor equal to the proportion of the available space needed
      by each expanded card.

    This way, the collapsed cards will take up the minimum space they need, and the expanded cards will take up the remaining space evenly, without overflowing the column.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search