CF8 on small devices

Make multi-column forms responsive on mobile devices in ChronoForms 8.

Overview

The issue occurs because grid layouts do not automatically stack into a single column on small screens.
Apply the "stackable" class to your grid containers, ensuring you are using CF8 version 8.0.30 or later for the class to function correctly.

Answered
ChronoForms v8
su support210 02 Dec, 2024

I'm setting up my forms on the new CF8 and I notice that the ones with multiple columns on mobile aren't broken down vertically into a single column as they should be for small devices. In previous versions I always had to create a special mobile form for this small devices. What is planned on CF8?

Screenshot_2024-12-02-06-44-00-13_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Riccardo Rausch
https://rausch.it
Max_admin Max_admin 02 Dec, 2024

How do you create the multi column layout ?

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
su support210 02 Dec, 2024
Fieldset  
Container Grid 50% 50% 
  Column1
    Container Grid 48% 48%   
      Column1
      Column2
    EndGrid
    Fieldset
  Column2
    Container Grid 48% 48%   
      Column1
      Column2
    EndGrid
Column2
  Calendar
  Fieldset  
  Container Grid 50% 50%   
    Column1
    Column2
  EndGrid
EndGrid
Textarea
Button
module1.jpg
module2.jpg
Riccardo Rausch
https://rausch.it
Max_admin Max_admin 02 Dec, 2024
Answer

please try to add the class "stackable" to the grid, in the class field, does it solve the issue on mobile ?

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
su support210 02 Dec, 2024

Unfortunately, this style "stackable" doesn't work. I've applied it to the three grids I use - from the outermost to the two inner ones - but it has no effect.

I'm working on it right now (I opened another thread for you about this) because I was trying to assign a Responsive Utility Classes (Gantry 5) to the entire module in a general way. Is it possible?

Riccardo Rausch
https://rausch.it
Max_admin Max_admin 02 Dec, 2024
1 Likes

please download v8.0.30 again, I have updated the code so that "stackable" will make the grid 1 row only on mobile devices (less than 600px)

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
su support210 03 Dec, 2024
1 Likes

Perfect! Thanks Max! Now the "stackable" class applied to the grids works correctly!

Riccardo Rausch
https://rausch.it
Max_admin Max_admin 03 Dec, 2024

thanks for the confirmation! 😊

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
This topic is locked and no more replies can be posted.