Reflow display leaves gaps between blocks

[Gordon McLeod]

I've presented this visually with screenshots on this Mahara page - https://mahara.org/user/learntribe/screenshots2
When reflowing blocks (in this case images in textboxes that are used as hyperlinked icons) there is an issue with how the blocks display. When using a multi-column, multi-row layout and shrinking the screen size until the layout reflows from 3 columns to 2 columns, as much of the content as possible is squeezed onto the first column, and the blocks on the second column appear to be evenly distributed to the same height as the first column (leaving gaps between them).

Ideally the content should distribute evenly so that (if equally sized) half of the blocks are in the first column and the others are in the second column. If not of the same height they should display as evenly as possible according to total height of the blocks in sequence - from a mobile perspective this makes better use of visible space than a longer first column does. The rows should also be vertically top-aligned with each block positioned under the previous so there isn't a gap between the blocks in the second row, which makes it look as if spacing is justified vertically.

Regards, Gordon.

[Kristina Hoeppner (kris-hoeppner)]

Hello Gordon,

Thank you for your report. This is better than trying to explain it in 140 characters on Twitter. ;-)

When you use rows, the blocks reflow within the row. That means that all blocks from the first row are re-arranged and then the second row is taken. Since your 4th and 5th images are in the second row and not the first row, the 4th image is not pulled into the empty spot that is there in the first row because Mahara essentially preserves the rows as it would not know how to adjust them later when you go back to a wider display.

That is a limitation of the current implementation of the layout. We would need to make changes to the layout engine to make it more flexible. I think one possibility would be using a Javascript grid layout library. A few are mentioned in https://365webresources.com/top-10-javascriptcss-grid-layout-systems-front-end-designer/ Freewall http://vnjs.net/www/project/freewall/ in particular looks nice and in contrast to Masonry and some others offers the possibility to resize a block to fit the available space. It offers numerous configuration options.

Cheers
Kristina

[Kristina Hoeppner (kris-hoeppner)]

P.S. Actually, even Bootstrap offers grid layouts: http://getbootstrap.com/2.3.2/scaffolding.html and http://getbootstrap.com/examples/grid/ for example. Though maybe these are a bit more limited?