Skip Navigation

[Resolved] Conditional output from three different fields needs to stay inline.

This support ticket is created 2 years, 3 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 3 replies, has 2 voices.

Last updated by lesleeM 2 years, 3 months ago.

Assisted by: Waqar.

Author
Posts
#2474305

I have a template for our custom content type Rides. We have custom fields for our rides titles Mileage1, Mileage2, and Mileage3. These allow us to include 3 different distance options for each ride.

We are trying to display these fields conditionally. Not all rides will have data in these fields. So we want to conditionally display them with a check to make sure the field is not empty. I have that working correctly already.

But the issue is we want to display these three fields all on one line separated by commas, but they are instead displaying on separate lines.

You can see an example of this here:

hidden link

Look in the right column where it says Miles:

The way we have this set up in the template is three separate conditionals with each field placed inside the conditional.

[wpv-conditional if=" NOT ( empty( $(wpcf-mileage1)) ) " ]<!-- wp:html -->
<div class="tb-field" data-toolset-blocks-field="1" data-last-update="1.4">Miles: [types field='mileage1' output='normal' format='FIELD_VALUE'][/types]</div>
<!-- /wp:html -->[/wpv-conditional]

[wpv-conditional if=" NOT ( empty( $(wpcf-mileage2)) ) " ]<!-- wp:html -->
<div class="tb-field" data-toolset-blocks-field="1" data-last-update="1.4">, [types field='mileage2' output='normal' format='FIELD_VALUE'][/types]</div>
<!-- /wp:html -->[/wpv-conditional]

[wpv-conditional if=" NOT ( empty( $(wpcf-mileage3)) ) " ]<!-- wp:html -->
<div class="tb-field" data-toolset-blocks-field="1" data-last-update="1.4">, [types field='mileage3' output='normal' format='FIELD_VALUE'][/types]</div>
<!-- /wp:html -->[/wpv-conditional]

This may be a simple CSS styling issue I'm not getting right. But it's also possible that my logic is wrong for how I set up the conditionals and placed the fields. We want to make sure that if a Ride has data in Mileage1 and Mileage2, that those two fields will display, but the Mileage3 field will not. We want to make sure that if a Ride has data in Mileage1 only then that will display, but the Mileage2 and Mileage3 fields will not.

I'm thinking this is going to be a very easy one and I'm going to feel stupid for having to file this ticket. But any help you can provide will be appreciated as always.

#2474619

Hi,

Thank you for contacting us and I'd be happy to assist.

Your understanding is correct and you can use a custom class and some CSS code to make these text items, show inline.

In the code of the opening divs which you'd like to show inline, you can include another custom class "tb-field-inline", for example:


<div class="tb-field tb-field-inline" data-toolset-blocks-field="1" data-last-update="1.4">

Next, in your template custom CSS code you can include this, to make those containers with the 'tb-field-inline' class, inline:


.tb-field-inline {
    width: auto !important;
}

I hope this helps and please let me know if you need any further assistance with this.

regards,
Waqar

#2476407

That worked! Thanks a bunch. I'm glad it was a simple styling issue and that I do feel stupid. 😉 I should have known that one.

#2476409

My issue is resolved now. Thank you!