I have built a view to display a grid of Records by an Artist. Some artists have 1 record some 4 some many more. When the view is displayed I want it to always center the records regardless of how many there are. So if 1 record, I want it in the middle not left justified. I can not figure out how to hide the empty columns. Somehow using a conditional in the view I assume?
Example with 1 record:
hidden link
Example with 3:
hidden link
I always want the records centered in middle of page.
Thanks
Hi Chris,
Thank you for contacting us and I'll be happy to assist.
The bootstrap grid that you're using for showing those records, doesn't support built-in styles or scripts to make it always show center aligned.
For this, you'll need to add some additional custom script and CSS code.
1. In your view's "CSS editor" tab, you can add the following CSS code:
.hovereffect .info .js-wpv-view-layout .row .col-sm-3 {
display: none;
}
.hovereffect .info .js-wpv-view-layout .row .col-sm-3.not-empty {
display: block;
width: 200px;
}
2. In the same view's "JS editor", you can include the following script:
jQuery( document ).ready( function( $ ) {
$(window).on('load resize', function () {
var totalCount = 0;
$(".hovereffect .info .js-wpv-view-layout .row").each(function() {
var $this = $(this);
$this.children('.col-sm-3').each(function(){
if ( $(this).children('a').length ) {
$(this).addClass('not-empty');
totalCount = totalCount + 1;
}
$this.width( totalCount * 200 );
});
});
});
});
For a even more personalized and detailed assistance around custom code, you can consider consulting, one of our certified consultants:
https://toolset.com/contractors/
I hope this helps.
regards,
Waqar
