Bootstrap grid leaves blanks when conditionally hiding some posts

This support ticket is created 5 years, 1 month 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.

This topic is split from https://toolset.com/forums/topic/hide-content-in-search-in-views/

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Views plugin

This topic contains 12 replies, has 2 voices.

Last updated by lucaC-7 5 years, 1 month ago.

Assisted by: Nigel.

Author

Posts

November 25, 2019 at 9:22 am #1390955

lucaC-7

Ok, we are near the goal!
One more thing... how can I avoid that the "filtered posts" leave an empty space?!?
(see image)

My code are this:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start --><wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-3">
             [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-241b086927e8f34162e9bdbb05b04f4f' )"]
	    [toolset_access role="commerciale_sezionali,commercale_libro,commerciale_altri_prodotti" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]
              [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-aaf4f701dced131b636b247af50799e0' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-ce23fd3f933350cfb826d6c0555aadc3' )"][toolset_access role="commerciale_bremet" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]</div>
		[wpv-item index=other]
			<div class="col-sm-3">[wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-241b086927e8f34162e9bdbb05b04f4f' )"]
	    [toolset_access role="commerciale_sezionali,commercale_libro,commerciale_altri_prodotti" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]
              [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-aaf4f701dced131b636b247af50799e0' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-ce23fd3f933350cfb826d6c0555aadc3' )"][toolset_access role="commerciale_bremet" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]</div>
		[wpv-item index=4]
			<div class="col-sm-3">[wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-241b086927e8f34162e9bdbb05b04f4f' )"]
	    [toolset_access role="commerciale_sezionali,commercale_libro,commerciale_altri_prodotti" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]
              [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-aaf4f701dced131b636b247af50799e0' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-ce23fd3f933350cfb826d6c0555aadc3' )"][toolset_access role="commerciale_bremet" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-3"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-3"></div>
		</div>
	</wpv-loop>
<!-- wpv-loop-end -->
    [/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]Effettua una nuova ricerca...[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Thanks

November 25, 2019 at 9:45 am #1390991

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Luca

The markup in the Loop Editor for the Bootstrap grid is based upon rows, and outputting each post in a column slot in a given row.

Conditionally omit a post and the slot for it is still created, leaving it blank.

With Bootstrap 4 you can use a single row for all of the results and the individual results will re-flow to fill the gaps of any missing slots. All the elements in a "visual" row won't necessarily occupy the same height, though, and depending on your output you may or may not want to use some additional CSS to modify this.

In any case, the changes you need to make to the Loop Editor are quite simple.

You need to move the row div outside of the wpv-loop tags (so that it is added only once), remove the wrap and pad attributes of the wpv-loop tags, and simplify the markup within the wpv-loop tags to remove how the linked template is inserted multiple times after different wpv-item shortcodes, and remove the padding sections.

The results are quite simple, e.g.:

	[wpv-items-found]
	<!-- wpv-loop-start -->
		<div class="row ">
		<wpv-loop>
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-the-view"]</div>
		</wpv-loop>
		</div>
    <!-- wpv-loop-end -->
	[/wpv-items-found]

In your case, with the conditional and access shortcodes, it should be

[wpv-items-found]
    <!-- wpv-loop-start -->
        <div class="row ">
        <wpv-loop>
            <div class="col-sm-3">
            [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-241b086927e8f34162e9bdbb05b04f4f' )"]
                [toolset_access role="commerciale_sezionali,commercale_libro,commerciale_altri_prodotti" operator="deny" raw="true"]
                    [wpv-post-body view_template="loop-item-in-docus"]
                [/toolset_access]
            [/wpv-conditional]
            [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-aaf4f701dced131b636b247af50799e0' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-ce23fd3f933350cfb826d6c0555aadc3' )"]
                [toolset_access role="commerciale_bremet" operator="deny" raw="true"]
                    [wpv-post-body view_template="loop-item-in-docus"]
                [/toolset_access]
            [/wpv-conditional]
            </div>
        </wpv-loop>
        </div>
    <!-- wpv-loop-end -->
[/wpv-items-found]

If you don't like the Bootstrap grid you can always use some alternative or create your own flexbox-based grid, the key being that your View output generates the markup in the required format for that grid.

November 25, 2019 at 9:53 am #1390997

lucaC-7

So...

With this code:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
        <div class="row ">
        <wpv-loop>
            <div class="col-sm-3">
             [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-241b086927e8f34162e9bdbb05b04f4f' )"]
	    [toolset_access role="commerciale_sezionali,commercale_libro,commerciale_altri_prodotti" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]
              [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-aaf4f701dced131b636b247af50799e0' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-ce23fd3f933350cfb826d6c0555aadc3' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-997e44bc962f80048a073d24910c8118' )"][toolset_access role="commerciale_bremet" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]</div>
        </wpv-loop>
        </div>
    <!-- wpv-loop-end -->
[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]Effettua una nuova ricerca...[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

the result are same as before...

November 25, 2019 at 10:15 am #1391021

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Sorry, my mistake.

The conditional shortcodes need to wrap the .col-sm-3 divs as well, so that both the container and the content are conditionally displayed. (Currently the container div is always being output, even if the content is not.)

Because you have two conditional shortcodes you'd need to put a div.col-sm-3 (together with its closing div tag) inside both conditionals.

November 25, 2019 at 10:21 am #1391035

lucaC-7

Sorry,
Can you write the correct code, starting from my actual one?
I think I'm loosing the point 😀

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
        <div class="row ">
        <wpv-loop>
            <div class="col-sm-3">
             [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-241b086927e8f34162e9bdbb05b04f4f' )"]
        [toolset_access role="commerciale_sezionali,commercale_libro,commerciale_altri_prodotti" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]
              [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-aaf4f701dced131b636b247af50799e0' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-ce23fd3f933350cfb826d6c0555aadc3' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-997e44bc962f80048a073d24910c8118' )"][toolset_access role="commerciale_bremet" operator="deny" raw="true"][wpv-post-body view_template="loop-item-in-docus"][/toolset_access][/wpv-conditional]</div>
        </wpv-loop>
        </div>
    <!-- wpv-loop-end -->
[/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]Effettua una nuova ricerca...[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

November 25, 2019 at 10:26 am #1391041

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

The items found part would be...

[wpv-items-found]
    <!-- wpv-loop-start -->
        <div class="row ">
        <wpv-loop>
            [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-241b086927e8f34162e9bdbb05b04f4f' )"]
                [toolset_access role="commerciale_sezionali,commercale_libro,commerciale_altri_prodotti" operator="deny" raw="true"]
                    <div class="col-sm-3">
                        [wpv-post-body view_template="loop-item-in-docus"]
                    </div>
                [/toolset_access]
            [/wpv-conditional]
            [wpv-conditional if="( $(_wpcf_access_group) eq 'wpcf-custom-group-aaf4f701dced131b636b247af50799e0' ) OR ( $(_wpcf_access_group) eq 'wpcf-custom-group-ce23fd3f933350cfb826d6c0555aadc3' )"]
                [toolset_access role="commerciale_bremet" operator="deny" raw="true"]
                    <div class="col-sm-3">
                        [wpv-post-body view_template="loop-item-in-docus"]
                    </div>
                [/toolset_access]
            [/wpv-conditional]
        </wpv-loop>
        </div>
    <!-- wpv-loop-end -->
[/wpv-items-found]

November 25, 2019 at 10:31 am #1391051

lucaC-7

So, not solved...

Now no more blank space, but only one row are displayed and some documents are missing...

November 25, 2019 at 10:50 am #1391069

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Could I take a look at your site. Assuming the conditionals are set up correctly, this part about the grid should be straightforward.

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

Please direct me to where I can see the problem.

November 25, 2019 at 11:41 am #1391093

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Unfortunately those credentials don't work.

Could you please edit your last reply and update the credentials?

November 25, 2019 at 11:55 am #1391107

lucaC-7

Sorry, url edited!

November 25, 2019 at 12:17 pm #1391145

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

I modified the View markup, but I'm not sure how to test it.

Presumably I need another user with a restricted role to test the output of the View.

Can you share credentials for such a user?

What search settings should I test the View with?

How many results do you expect to be shown for that user?

I'll set another private reply for the credentials of the test user.

November 25, 2019 at 12:36 pm #1391151

lucaC-7

From mobile, I think it works!
In 30min. I make more test.

November 25, 2019 at 12:47 pm #1391155

lucaC-7

My issue is resolved now. Thank you!