[Resolved] The New Forms builder does not let me make more then one coumn

[Author]

Posts

[hanL]

I am trying to:
use two columns in a Content and User Form
Link to a page where the issue can be seen:
In the backend... Forms builder...
I expected to see:
When moving a field to an existing row, I expected to get two columns, as hown in de demo movive
Instead, I got:
Just one column

[Christian Cox]

Hi, can you try these troubleshooting steps first?
- Update to the latest version of Forms, clear your browser cache, and try again.
- Temporarily deactivate all plugins except Types, Views, and Forms. Activate a default theme like Twenty Nineteen, then test again.
- If the problem is resolved, reactivate your theme and other plugins one by one until the problem returns
- If the problem is not resolved, please open the browser console and check for any JavaScript errors that appear when you try to add a field to an existing row.

[hanL]

Hi Christian,

I disabled everything except PolyLang and switched browsers
Using Chrome I now have console errors:

JQMIGRATE: Migrate is installed, version 1.4.1
load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:3 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.
add @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:3
a.event.add @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:8
(anonymous) @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:3
each @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:2
each @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:2
sa @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:3
on @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:3
(anonymous) @ icl_media_manager.js?ver=3.3.9.1:268
27[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,underscore,shortcode,utils,backbone,wp-util,moxiejs,plupload,jquery-ui-core,jquery-ui-widget,jquery-u&load[]=i-mouse,jquery-ui-sortable&ver=5.1.1:2 [Violation] 'DOMContentLoaded' handler took 1103ms
[Violation] Forced reflow while executing JavaScript took 408ms

[Christian Cox]

I don't see anything there that would be causing the type of problem you described. May I log in and take a look at this in wp-admin? Please provide login credentials here, and tell me which Form I should test.

[Christian Cox]

Okay I don't see anything obviously wrong here. May I make a clone of your site using the Duplicator plugin? I would like to run some additional tests on my local environment.

[hanL]

No problem!

But
- Switched theme to 2019 and enabled Bootstrap 3
- Now it works...
- Redisabled Bootstrap (I disabled it because of a post on your site about Divi integration...)
- It does not work
- Enabled "My theme is already loading Bootstrap"
- It works
- Switched theme to Divi
- It still works
- Enabled all plugins
- It still works

So I guess Bootstrap is required ("My theme is already loading Bootstrap")

[Christian Cox]

Okay, I don't think I need a copy of the site in this case. Let me try to get some additional information from my 2nd tier support team. Since Divi and Bootstrap have some known compatibility issues, I want to find out the best recommendation for you. Please standby, I'll let you know what I find out.

[hanL]

Thanks so far Christian!

[hanL]

Bootstrap must be really loaded to show the 2 columns in the frontend.

[Christian Cox]

Based on some feedback from my 2nd tier support team:
- It is not recommended to load Bootstrap when using Divi
- Bootstrap is required for some features of the drag-and-drop editor
- Therefore it is not expected that the drag-and-drop editor will work correctly with Divi
- The editor's expert mode is available where you can add your own custom markup and CSS to create custom column structures

If you'd like to see more integration between the Form builder and Divi, I encourage you to submit your request over here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
Our key stakeholders check this list of requests to determine which features should be added to the software.

[hanL]

My issue is resolved now by enabling Bootstrap, although this is not not recommended for Divi. Thank you!

[Antonio_V7832]

I, too, Had this problem hanL. I wish we could see more integration done well with Divi. I know it may be hard, but it's very popular.

By the way, following your steps hanL helped me solve this issue.

Thanks!