Impossible to set "col-auto" and "col" for certain breakpoints in "column" plugin

[sergeywd]

Right now there is no way to set neither col-auto, col-sm-auto, col-md-auto,col-lg-auto, col-xl-auto nor col, col-sm, col-md, col-lg, col-xl classes in column plugin.

It makes impossible to build some layouts.

[wesleyboar]

I have just ran into this same problem described.

But it is not impossible in the column plugin. (It is impossible within the plugin's "Responsive settings".)

A user may add any class via "Advanced settings"'s ATTRIBUTES.

But, like the original reporter, I also believe this control should be available in "Responsive settings".

[marksweb]

@sergeywd @tacc-wbomar

Hello, one of our contributors recently started to build a package which vastly improves on this app while also bringing bootstrap5 support and being able to support other frameworks. Furthermore it can migrate your content built in this bs4 app.

It doesn't currently have bootstrap4 but that could easily be added and you may wish to take the opportunity to move to 5?

https://pypi.org/project/djangocms-frontend/

The repo is currently located at https://github.com/fsbraun/djangocms-frontend

[wesleyboar]

Hm, thank you. Migration is important. The other features it touts sound very good.

I will not try it out yet, but I will keep my eye on it.

Issue Links:

• https://github.com/django-cms/djangocms-bootstrap4/issues/125
• https://github.com/fsbraun/djangocms-frontend/issues/8

[fsbraun]

@tacc-wbomar @marksweb @sergeywd djangocms-frontend (https://github.com/fsbraun/djangocms-frontend) is supporting auto columns. I would like to get your opinions on the UI, however. I've got three options on my mind:

1. Allow column size 0 stand for auto. This is easy to implement but imho totally intransparent to the editor.
2. Replace the numeric input fields by text input fields allowing auto, 0, 1, ..., 12 (or whatever your grid size is) as inputs. This would make you lose the little increment and decrement arrows in the input fields.
3. Replace the input fields by select pulldowns each offering auto, 1, 2, ..., 12. This makes the options clear but might be unfamiliar for existing users or even cumbersome to handle.

What do you think? Thanks for your input!

[wesleyboar]

I appreciate the thought and opportunity. Thank you.

1. I also believe this is not transparent to the user. _{If chosen, please document in context (e.g. tooltip, <small>, etc... whatever UI is DjangoCMS-like).}
2. Losing the type="number" field feels like a step backward. _{If chosen, please error catch on invalid value (avoid silent failure) either via Python or <input pattern="regex_here"> attr.}
3. Cumbersome.

I have ideas:

4. Number field with inline accompanying checkbox "☐ Auto".

   • When checked, number field is disabled (and maybe cleared).
   • When unchecked, number field is enabled (and maybe restored to previous value).

   Less arcane, but it is not obvious to those unfamiliar to Bootstrap. (Are they an audience?) _{Perhaps should still document in context (e.g. tooltip, <small>, etc... whatever UI is DjangoCMS-like).}

Well, I lied. I only had that one other idea.

[fsbraun]

@tacc-wbomar Thanks very much for your thoughts!

Indeed, 4 is also an option! Since the column form already is quite crowded I guess the checkbox would have to be below the input field.

This leads to another idea:

5. Number field (<input type="number">) with additional "auto" value. Then the arrows might also be used to, say, get "auto" if you decrease 1 (or increase 12). This would not add another row of checkboxes but still allow to get to the "auto" value by playing with the controls. An implementation would probably have to tweak the display of the input field (e.g., replace the value "0" with "auto") as well as keyboard interactions (to be able to type "auto" or at least "a"). Not sure I know out of the box on how to do this.

[fsbraun]

Here's a screenshot on what solution 2 might look like. Solution 5 would also have the little arrow controls.

For solution 4 I imagine having an auto checkbox below the col inputs (but above the horizontal divider).

[wesleyboar]

Ah, solution 5 is nice. Seems a bit trickier to implement.

My votes are dependent:

• 5, if it can be done reliably
• 4, because type=number is accessible
• 2, if 4 and 5 just don't work out

[wesleyboar]

For 5, if you change the input's type from number to text and back, user can type "auto" and numbers without trickery.