[Resolved] Display cred taxonomy inline

[Author]

Posts

[Mario]

Tell us what you are trying to do?
Display cred taxonomy inline

<div class="form-group ">
<label>Do you have experiences providing any of these services?</label>
[cred_field field='p-experience' force_type='taxonomy' output='bootstrap' display='checkbox']
</div>

Is there any documentation that you are following?
https://toolset.com/forums/topic/styling-filter-checkboxes/

I have tried using the example but has not worked.

[Christian Cox]

The example isn't for CRED, it's for a custom search View's filter. Is your site using Bootstrap 4? If so, I can show you how to implement their inline forms like shown here: https://getbootstrap.com/docs/4.3/components/forms/#inline

[Mario]

Hi Chris
I have change Bootstap loading from 3 to 4.

Yes, some assistance would be great.

[Christian Cox]

You'll have to use expert mode in the Form builder. Wrap your taxonomy shortcode in a div with the class "tssupp-inline":

<div class="tssupp-inline">
  [cred_field field='your-taxonomy-slug' force_type='taxonomy' output='bootstrap' display='checkbox']
</div>

Then in the Form's JS panel, add some custom code to add the form-check and form-check-inline classes to each list item:

jQuery(document).ready(function($) {
    setTimeout(function() {
        $('.tssupp-inline li.checkbox').addClass('form-check form-check-inline');
    }, 500 );
});

That should implement Bootstrap 4's inline checkboxes display. Let me know if you have questions about that.

[Mario]

Excellent. Is there a way to put a border around the taxonomy?

[Christian Cox]

I'm not sure I know exactly where you want the border, but you can use CSS like so:

.tssupp-inline {
  border:1px solid black;
}

Or wrap your taxonomy shortcode in another element and apply your styles there.

[Mario]

The code below - raps all the taxonomies in one box rather than each taxonomy.

<div class="tssupp-inline">
<div class="boarder-tax">
[cred_field field='p-service' force_type='taxonomy' output='bootstrap' display='checkbox']
</div>
</div>

.boarder-tax {
border:1px solid black;
}

[Christian Cox]

You could add the border to the form-check-inline class, or target the list item inside the boarder-tax class instead.

[Mario]

My issue is resolved now. Thank you!