[Resolved] Views with Bootstrap 3 columns

[Author]

Posts

[bouchairY]

Hello
I have a conditionnal view for displaying my cpt with Bootstrap 3 columns

When I have 1, 2, 3, 4, 5, 6, 7, 9, 10 items ... the layout is OK
When I have 8, 11 ... items, the layout is NOT OK

Please find below the link to the 8 items Not Ok version :

hidden link

Thank you for your help

[Nigel]

Hi there.

Can you clarify how your View is set up, specifically what the conditional part is.

[bouchairY]

Hello
Please find here the code for the view loop

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop projects_holder clearfix v3 standard">
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]	
              [wpv-conditional if="( '[wpv-post-field name='visible_sur_le_front']' eq '1' ) AND ('[wpv-current-user info='id']' eq '')" ]
	      <div class="col-sm-4">[wpv-post-body view_template="element-de-boucle-dans-safaris_tags"]</div>
             [/wpv-conditional]
             [user_role_editor roles="administrator, editor, manager, agent"]
             <div class="col-sm-4">[wpv-post-body view_template="element-de-boucle-dans-safaris_tags"]</div>
              [/user_role_editor]
		
            [wpv-item index=2]
            [wpv-conditional if="( '[wpv-post-field name='visible_sur_le_front']' eq '1' ) AND ('[wpv-current-user info='id']' eq '')" ]
            <div class="col-sm-4">[wpv-post-body view_template="element-de-boucle-dans-safaris_tags"]</div>
            [/wpv-conditional]
            [user_role_editor roles="administrator, editor, manager, agent"]
            <div class="col-sm-4">[wpv-post-body view_template="element-de-boucle-dans-safaris_tags"]</div>
            [/user_role_editor] 
      
	    [wpv-item index=3]
            [wpv-conditional if="( '[wpv-post-field name='visible_sur_le_front']' eq '1' ) AND ('[wpv-current-user info='id']' eq '')" ]
	    <div class="col-sm-4">[wpv-post-body view_template="element-de-boucle-dans-safaris_tags"]</div>
            [/wpv-conditional]
            [user_role_editor roles="administrator, editor, manager, agent"]
            <div class="col-sm-4">[wpv-post-body view_template="element-de-boucle-dans-safaris_tags"]</div>
            [/user_role_editor]
	
		[wpv-item index=pad]
			<div class="col-sm-4"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-4"></div>
		
	</wpv-loop>
	</div>
	<!-- 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]

As you can see :

- ALL items are displayed if a user is connected and have one of this role : administrator, editor, manager, agent
- If a user is not connected, only items with metafield "visible_sur_le_front" = 1 are displayed

Thank you

[Nigel]

Presumably it looks okay for the privileged roles.

The grid system expects 3 items per row, but you may omit some of the posts that would fill those slots, so it is inevitable that this won't work.

You would either have to replace the markup so that it doesn't use the Bootstrap grid and uses an alternative which doesn't require a fixed number of elements in rows, or, what I think is more viable for you...

Create two Views. One which displays all posts and then another which displays only those posts marked as visible on the front end.

Then apply the conditions where you insert the Views, so that either one of the Views will be inserted depending on the user role.

That will fix the issue.

[bouchairY]

Hello
Thank you for your reply,
I will try to 2 alternatives

First one : The theme it not using Boostrap by default, i will try to use its css
Second one : it is a good idea, i will try and let you informed

What I don't undertsand, when there is a lotof items, it is working well

Thank you

[Nigel]

Sure, let me know how you get on.

Without knowing your theme's CSS I think option 2 is your best option, many grid systems work the same way.

[bouchairY]

I finally prefer the second solution
Thank you again for your idea