[Resolved] Divi colums and Toolset Bootstrap Grid view conflict

[Author]

Posts

[gille]

Hi, I'm using Divi and Toolset for a very long time. Everything always works. But now I have a strange problem. When I load in a view in a text module (what always worked) my layout is broken (columns are broken). It only goes away if I remove the view. Is there a fix for it?

Really need it in my next project. In attach images.

Thanks!
Gille

[Christian Cox]

Hi, sounds like maybe an unclosed div or something is breaking the markup structure. Could you copy + paste the code from your View's Loop editor here for me to review? If a Content Template is used in the loop, please copy + paste that code as well. If the View is visible on your site, please send me a URL.

[gille]

Hi Christian

Strange thing is that only if I choose bootstrap as an option in the loop then it breaks the layout. If I choose unfiltered html than it works fine.

When using a view it was this code:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class=" ">
<div class="col-sm-12">[wpv-post-body view_template="Loop item in test 2"]</div>
[wpv-item index=other]
<div class="col-sm-12">[wpv-post-body view_template="Loop item in test 2"]</div>
[wpv-item index=pad]
<div class="col-sm-12"></div>
[wpv-item index=pad-last]
<div class="col-sm-12"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Now I use unfiltered html: hidden link

[Christian Cox]

Hi, there is currently a known issue when using the Loop Wizard to create Bootstrap grids containing only 1 column: https://toolset.com/errata/view-loop-output-bootstrap-grid-missing-div-and-class/

Basically the Loop wizard creates an unclosed div element, which breaks the Bootstrap grid. One easy way to fix this is to modify the loop like this:

<!-- wpv-loop-start -->
<wpv-loop>
<div>[wpv-post-body view_template="Loop item in test 2"]</div>
</wpv-loop>
<!-- wpv-loop-end -->

Or after using the Loop Wizard to create a Bootstrap Grid, manually add a closing div tag just before this line:

[wpv-item index=other]

Also I should point out that using Toolset's Bootstrap together with Divi is known to be problematic, just in case you're not aware: https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/

[gille]

Thanks Christian, worked very well. Great support, like always!

[markusA-2]

Hi, i was searching for a solution to show grid-archives from cpt's.
Im using Divis- ET-Builder Shortcodes in the Loopeditor to make grids. You also can make sliders and other elements.
I think this way is the easiest and the shortcodes should be extended to the loop editor.