Column option doesn't break list into columns

Created on 26 July 2024, 4 months ago
Updated 12 August 2024, 3 months ago

Using the column option results in one long list in Gin and Claro as well as my custom theme that extends the Bootstrap base theme β†’ . I'm not familiar enough with CSS columns to know if this is the correct solution, but removing column-fill: auto; or setting it to column-fill: balance; (form--checkboxes-columns.css line 10) fixes it for me.

πŸ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States jvogt Seattle, WA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jvogt
  • πŸ‡¨πŸ‡¦Canada LittleCoding Hamilton, ON

    I will be taking a closer look at this. Thank you for flagging the issue.

  • πŸ‡ΊπŸ‡ΈUnited States jvogt Seattle, WA

    Actually it looks like there's probably more to it than just changing the column-fill. With either of the options I suggested, if the items don't distribute evenly across the number of columns, it makes the middle columns the longest, which looks a little weird (and is different from the Grid display option which weights the longer columns to the left). Examples below using the Gin theme.

    Column display: 3 columns, column-fill: balance

    Grid display: 3 columns

    (Original for context) Column display: 3 columns, column-fill: auto

  • πŸ‡¨πŸ‡¦Canada LittleCoding Hamilton, ON

    Just an update on this issue.

    • The columns CSS is triggering a bug in Chrome browser and its ability to handle the column-fill rule value of auto or in ability I should say.
    • Also, the base CSS style names being added to grouped options (ex radios and checkboxes) by the base theme stable have changed. .form-checkboxes and .form-radios are no longer added to the div element wrapping the field's grouping of items.

    in case you need a quick fix for the Chrome bug try the following:

    -moz-column-fill: auto;
    column-fill: initial;
    
Production build 0.71.5 2024