[Resolved] Empty columns don’t hide

[Author]

Posts

[CommMgr]

I am using Tools and Views plugins on our Advisory Board page. hidden link

The page is setup with views in a 4 column grid. On desktop and tablet, the grid performs correctly.

In phone view, the last column shows empty columns if there are less than 4 entries (see screenshots for reference).

I need assistance hiding the columns on phone view if they are empty.

Thank you for your assistance.
CommMgr

[Beda]

Those empty columns are there on desktop as well, as you see in your own screenshot.

It's due to the HTML being rendered, of course, even if the Field is empty

You can use conditional HTML to not output certain HTML if there is nothing to output.
But a GRID needs to be output - otherwise the grid breaks.

So, here you could use the index and padding attributes that get generated:

<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in asdfadsf"]</div>
		[wpv-item index=2]
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in asdfadsf"]</div>
		[wpv-item index=3]
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in asdfadsf"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-4"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-4"></div>
		</div>
	</wpv-loop>

The last are what is output if you do not have content.
More details here:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item

[CommMgr]

Hi, Beda...

Thank you for replying. I will use the code you provided and let you know if it works.

Thank you for your help,
CommMgr

[CommMgr]

Hi, Breda...

I just used the code you provided and it didn't work. Empty columns are still appearing in phone view.

Here is the code I am using:

[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 advisory_board_column">[wpv-post-body view_template="Loop item in Advisory Board List - End User"]</div>
		[wpv-item index=2]
			<div class="col-sm-3 advisory_board_column">[wpv-post-body view_template="Loop item in Advisory Board List - End User"]</div>
		[wpv-item index=3]
			<div class="col-sm-3 advisory_board_column">[wpv-post-body view_template="Loop item in Advisory Board List - End User"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-3 advisory_board_column"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-3 advisory_board_column"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
[wpv-layout-end]

Thank you for your help.
CommMgr

[Christian Cox]

Hi, try this version instead:

[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 advisory_board_column">[wpv-post-body view_template="Loop item in Advisory Board List - End User"]</div>
        [wpv-item index=other]
            <div class="col-sm-3 advisory_board_column">[wpv-post-body view_template="Loop item in Advisory Board List - End User"]</div>
        [wpv-item index=4]
            <div class="col-sm-3 advisory_board_column">[wpv-post-body view_template="Loop item in Advisory Board List - End User"]</div>
        </div>
        [wpv-item index=pad]
        [wpv-item index=pad-last]
        </div>
    </wpv-loop>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
[wpv-layout-end]

The pad and pad-last items are there to help you fill in empty space with placeholder information, if you want. In your case, I don't think you want placeholder information. You want trailing spaces to be left blank with no placeholders, so I have removed the content from those items. I kept the closing div after pad-last because it's necessary to close the row out when fewer than 4 items occur in the last row.

Also your wrap is 4 instead of 3, so the indexes had to be modified. Items 2 and 3 are identical, so they are covered by index "other". Item 4 has the extra closing div for the row. For more information about this, you can read more about Loop structures here: https://toolset.com/documentation/user-guides/digging-into-view-outputs/

[CommMgr]

Thank you, Christian...that code worked perfectly. I appreciate your assistance.

CommMgr