Skip Navigation

[Resolved] Bootstrap Height Unequal – Masonry Integration

This support ticket is created 7 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 6 replies, has 2 voices.

Last updated by Ole Andreas Vekve 7 years, 7 months ago.

Assisted by: Beda.

Author
Posts
#420619
Skjermbilde 2016-07-29 kl. 10.45.12 copy.png
Skjermbilde 2016-07-29 kl. 10.41.54.png

As several posts on the forums shows, the regular Bootstrap is not working properly when the height is different for the posts. As the other topics says, using Masonry Script solves this problem.

I have used Masonry earlier with no problem, but the problem appears when I have started using Types Layouts.

It turns out this should be solved in the late 2015, so I am sure I am doing something wrong.

With no use of Masonry it turns out like the first screenshot.

I am then using the following:

<div class="container luft">
        	<div class="col-md-12">
                <div class="row">
                    <?php the_ddlayout('default-layout'); ?>
                </div>
            </div>
        </div>
[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
          	<div class="col-md-3 col-sm-6 luft">
              	<div class="col-sm-12 maximg nopadding maximg">
              		[wpv-post-featured-image size="post_thumb"]
				</div>
              	<div class="clearfix"></div>                                    
              	<div class="padding lefttext color1 whitetext">
                  <h1 class="twentyfive lefttext nomarginbottom">[wpv-post-taxonomy type='kunstner' format='name']</h1>
                  <h2 class="nomargintop color2text semibold">[wpv-post-title]</h2>
                  <div class="col-sm-6 nopadding">
                    <a href="[wpv-post-url]" class="btn btn-small btn-small btn-outline-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">[types field="solgt" option="1" state="checked"]Solgt[/types][types field="solgt" option="1" state="unchecked"]kr. [types field='pris'],-[/types]</a> 
                  </div>
                  <div class="col-sm-6 nopadding">
                    <a href="[wpv-post-url]" class="btn btn-small btn-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">Les mer</a> 
                  </div>
                  <div class="clearfix"></div>     
              	</div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

When I include Masonry I do the following:

<div class="container masonry-container luft">
        	<div class="col-md-12">
                <div class="row">
                    <?php the_ddlayout('default-layout'); ?>
                </div>
            </div>
        </div>
(function( $ ) {

	var $container = $('.masonry-container');
	$container.imagesLoaded( function () {
		$container.masonry({
			columnWidth: '.col-md-3',
			percentPosition: true,
			itemSelector: '.col-md-3'
		});
	});

})(jQuery);
[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
          	<div class="col-md-3 col-sm-6 luft">
              	<div class="col-sm-12 maximg nopadding maximg">
              		[wpv-post-featured-image size="post_thumb"]
				</div>
              	<div class="clearfix"></div>                                    
              	<div class="padding lefttext color1 whitetext">
                  <h1 class="twentyfive lefttext nomarginbottom">[wpv-post-taxonomy type='kunstner' format='name']</h1>
                  <h2 class="nomargintop color2text semibold">[wpv-post-title]</h2>
                  <div class="col-sm-6 nopadding">
                    <a href="[wpv-post-url]" class="btn btn-small btn-small btn-outline-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">[types field="solgt" option="1" state="checked"]Solgt[/types][types field="solgt" option="1" state="unchecked"]kr. [types field='pris'],-[/types]</a> 
                  </div>
                  <div class="col-sm-6 nopadding">
                    <a href="[wpv-post-url]" class="btn btn-small btn-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">Les mer</a> 
                  </div>
                  <div class="clearfix"></div>     
              	</div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Please see provided screenshot of this.

So close. Everything works very well, except that there is a 3 columns space empty on the right side. Looking into the code with Inspect I found this:

<div class="container masonry-container">
    <div class="col-md-12">
        <div class="row">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                      <div class="row">
                          <div class="col-md-12">
                                <div class="col-md-3 col-sm-6">
                                  ... Here comes the content
                                </div>
                           </div>
                       </div>
                  </div>    
            </div>
       < /div>
< /div>

So could it be an issue that all the containers, rows and so on are being added?

Related posts:
https://toolset.com/forums/topic/bugsconflicts-between-masonry-and-views-1-11-1/
https://toolset.com/forums/topic/conflicts-between-views-1-11-1-and-masonry-jquery-script/
https://toolset.com/documentation/user-guides/view-layouts-101/
https://toolset.com/forums/topic/masonry-grid/

To sum it up the problem is that Bootstrap does not fix the grid when columns have unequal heights out of the box. Therefor Masonry must be included.

Looking forward to hear from you again,

#420907

Layouts is built on Bootstrap.

You can with Custom Fucntions, filter layouts to use another Framework:
https://toolset.com/documentation/user-guides/layouts-framework-api/

But it must be a framework that is built on a 12 column basis.

The issue in Views is that now Views outputs a Standard HTML output wrapping the loop:
https://toolset.com/forums/topic/bugsconflicts-between-masonry-and-views-1-11-1/#post-352094

This can not be removed wihtout Custom Code and is a required HTML for so many features that we discourage to remove it, as example pagination won't work, or any AJAX feature.

What you are doing in the PHP where you insert the_ddlayout() call is including the entire layout in a single Row.

But Layouts will add Rows per each Row you add to a Layout.
So you should not add a hardcoded Row there.

Why don't you try to add the DIV masonry class to the Cell itself?
Layouts has a method to do this, directly in the GUI.

If you want to wrap the entire Layout in a custom DIV you can do that, but I can not encourage to wrap the whole layout in a single Row, that will most likely break bootstrap.

The syntax should be like:

container
  row
    col
    col
  /row
  row
    col
    col
  /row
/container

I would suggest you do remove all Custom Code (HTML) and try a minimal output, and then try to add the classes to the Rows/Cells in the layout itself.

But as mentioned, Layouts itself is built on Bootstrap, and only with the layouts Framework API you can change this to use any other 12 column Framework.

Additionally the fact that Views outputs a default HTML by now, will require you to either use the Custom Function to strip that out (and renounce to many features of Views).

#421156

Good answer. Thanks for clearing that out,

I removed the hardcoded HTML, and added .masonry-container to the cell itself, and it actually solved the problem, almost.

The problem is that when using Parametric Search, it seems like the Bootstrap is overrunning the Masonry in one or another way.

Loading the archive page works fine. When clicking on a category, (e.g Type 3). it seems like the Masonry no longer works. When clicking on category to navigate back to see all posts, the Masonry still not works. But when refreshing the page it works.

Example: hidden link

The settings for Parametric Search are the following:
AJAX results update when visitors change any filter values

If I set the settings to:
Full page refresh when visitors click on the search button

And then add Submit button, it actually works. But then the visitor needs to click the submit button. Which is not what our customers wants.

So maybe there is a way to workaround this? Any ideas?

Looking forward to hear from you again,

Edit:
It also makes the pagination crash. So when trying to scroll the posts are being added above each other...

#421161
Open JS Section.png
Choose event.png
Add your function.png

Yes, it is an issue with the AJAX not being fired so to initiate the Masonry grid.

You need to know the Function that masonry uses, to initiate it.

Then, you head to your parametric Search HTML editor and open the JS editor.
There you will find a "Front End Events" button.

Click it and find the event were (which event) at you want to hook the Masonry Custom JS Function.
Select it and insert the hook.
Then, IN the Hook you insert your Masonry JS Function that fires up the Grid, so to delegate it back to the View when you (example) perform a Search.

See also my screenshots.

#422069

Hello,

I have esculated the case to Stackoverflow, and users request a JSFiddle. (http://stackoverflow.com/questions/38712783/initiate-masonry-after-infinite-scroll-and-parametric-search?noredirect=1#comment64891831_38712783)

So I am wondering if any possibility to export the WP Types Layouts JS to JSFiddle.

#422071

If you mean the JS you add in the Editors, you can grab them with copy paste from the editors.

If you export a Layout it is zipped in a format that requires Layouts to read it.
You can though try to open the ZIP locally and see if you can use the single files, but I do not think that will work for a fiddle.

#425343

The problem was solved using the following

(function( $ ) {
	"use strict";
	var $container = $('.masonry-container');
	$container.imagesLoaded( function () {
		$container.masonry({
		  columnWidth: '.item',
		  percentPosition: true,	
		  itemSelector: '.item'
	});
});

$( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	$container.masonry('reloadItems').masonry();
});

$( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	$container.masonry('reloadItems').masonry();	
});

$( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	$container.masonry('reloadItems').masonry();
	$container.imagesLoaded( function() {
	  $container.masonry();
	});
});

$( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	$container.masonry('reloadItems').masonry();
	$container.imagesLoaded( function() {
	  $container.masonry();
	});
});

})(jQuery);

This was placed in the footer.php

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.