Skip Navigation

[Resolved] Center Views Grid when only 2 of 4 columns are present

This support ticket is created 5 years, 5 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
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 2 replies, has 2 voices.

Last updated by chrisC-25 5 years, 5 months ago.

Assisted by: Waqar.

Author
Posts
#1132211

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

#1132586

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1132788

Perfect! Thank you!

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