[Resolved] Custom Fields in Columns / Float Hidden Columns within Tab Content

[Author]

Posts

[aaronS-5]

Is there a recommended solution for having custom fields in columns and hiding the entire column for empty custom fields without causing blank columns? This particular solution would be within a tab, currently I'm using one_third in the shortcode but when a custom field is in one_third_last the column is blank and it causes odd spacing since the next column doesn't float but goes to the next line.

[Shane]

Hi Aaron,

Thank you for contacting our support forum.

Actually in your case you will need to check the field with conditionals first.
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-fields-and-other-elements-for-emptynon-empty-values/
Then you can build out your columns based on this.

Thanks,
Shane

[aaronS-5]

Thanks Shane, I do have conditionals for the custom fields set up using the NOT empty function, so the conditionals do hide the specific column. My issue is that within a tab, using 3 column layout and having to use one_third_last is that when a custom field falls on the one_third_last column and has no value, that column ends up being empty...but then the next column doesn't wrap and jumps to the next line as one_third. Is there a way to have all columns flex/ float left so that when a column has an empty custom field value it is hidden and the next visible column floats to take over that empty column?

[Shane]

Hi Aaron,

Based on what I see it won't be possible hide the column entirely because of how it is built.

So if a field is empty you're going to have to rebuilt inside the conditional from a 3 column to a 2 column type layout.

I'm assuming you're using a plugin to create the columns correct?

Thanks,
Shane

[aaronS-5]

Hi Shane, I'm using the built-in wordpress shortcode columns in the text editor of (one half, one third, etc.). The issue is requiring the "last" shortcode for a custom field that ends up be empty and therefore causes an empty column.
As I'm thinking, Is it possible to just set up a custom div before each conditional with a width of 33% and have each column float left? Then if the custom field within the column was empty, the next element would simply float and take over that column? Then using media queries per device if needed to handle any issues with width.

[Shane]

Hi Aaron,

You can do this. A better solution is to use the bootstrap columns and just add a conditional around each of the divs, so if the field is empty it wont show up.

Here is a mock up.

<div class='row'>
[conditional]
<div class='col-sm-3'>some text</div>
[/conditional]
[conditional]
<div class='col-sm-3'>some text</div>
[/conditional]

[conditional]
<div class='col-sm-3'>some text</div>
[/conditional]

</div>

SO whichever custom field is empty it won't show that column.

Please let me know what you think of this.

Thanks,
Shane

[aaronS-5]

Shane, unfortunately the site is using the divi theme and bootstrap doesn't always place nice with Divi. So it most likely wouldn't be best practice to use bootstrap in this case, correct? That definitely would have been my best option if not for that conflict which is documented in toolset and which is why I avoided it.

[Shane]

Hi Aaron,

Yes if it divi you're using then avoid bootstrap.

Then as a workaround you can manually do the columns and use the same concept as I depicted in my previous post and it will work just as well.

Thanks,
Shane

[aaronS-5]

Great, thanks Shane, appreciate the help. I'll use the columns manually with set widths / float in the same format as you suggested. Thanks again!