[Resolved] Checklist formatting

[Author]

Posts

[bruceW-3]

Tell us what you are trying to do?
I have a front-end form which includes a checklist of a custom post type's taxonomy. There are ~20 items in the checklist and they are displayed in a single column by default. This is not ideal as there is tons of wasted white space to the right of checklist items.

I believe the checklist is rendered via Bootstrap, but there doesn't appear to be any way to invoke "horizontal" vs "vertical" formatting of the checklist via the [cred_field] shortcode in the "expert" view of the form editor.

Is there any documentation that you are following?
I couldn't find any documentation on the toolset.com website... 🙁

Is there a similar example that we can see?
Bootstrap documentation shows that a horizontal formatting of a checklist is possible here: hidden link

What is the link to your site?
nariindy.cardinalacres.com

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where I can see the form as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[bruceW-3]

I resolved the issue via a change to the custom taxonomy setting of "taxonomy type". Going from my original "Hierarchical" setting (not needed in this particular implementation) to "Flat" resulted in a much more compact display of the taxonomy options on the front-end forms.

Thanks for the quick response!

[bruceW-3]

After a little more testing, changing this setting results in the taxonomy being treated like "tags" instead of "categories" with no apparent apparent way to constrain the taxonomy to pre-defined values (I don't want end-users to be able to create new terms in this taxonomy).

So, I'm back to my original issue with the formatting of the checkbox list using only 1 column and leaving a bunch of wasted whitespace.

[Minesh]

Can you please share problem URL where I can see the form as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[bruceW-3]

Well, my attempts to diagnose this problem have identified that duplicate loading of the Bootstrap framework by the Blocksy theme might be related and was causing other issues. I have disabled Toolset loading Bootstrap via the settings, but the issue still persisted.

Now, selectively deactivating Toolset plugins along with other installed plugins in an attempt to diagnose this issue seems to have trashed the custom taxonomy that I created. Thus, I'm going to have to redo my work in creating the custom taxonomy and see if the problem persists.

While Toolset seems to be a pretty powerful tool, the graphic UI doesn't seem to be ready for general usage. Very confusing and I keep having issues such as this crop up that are making me rethink relying on Toolset for a production website. Much of Toolset doesn't seem to have been updated in quite some time also lending to my skepticism of the plugin in general.

[Minesh]

I believe this issue will be resolved by adding some custom CSS by expanding the row width but I will be able to tell you after I review the form and how it's currently displayed.

Can you please share problem URL and admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

To your "New Business" form:
=> hidden link

I've added the following class to the div with row class that displays the "Services":

<div class="row display_services">
		<div class="form-group col-md-12">
			<label for="%%FORM_ID%%_service">[cred_i18n name='service-label']<strong>Services</strong><br/><small>Check the services that your business provides; if you'd like to request a new service category, please contact the <a href="mailto:webmaster@nariindy.com">webmaster</a></small>[/cred_i18n]</label>
			[cred_field field='service' force_type='taxonomy' output='bootstrap' display='checkbox']
		</div>
	</div>

And then I've added the following custom CSS to CSS editor section of the form:

.row.display_services li {
    display: block !important;
    float: left !important;
    width: 33%;
}

I can see now "Services" checkboxes displayed in three columns. Can you please confirm:
=> hidden link

You can apply the same CSS and class I shared to your Edit form as well.

[bruceW-3]

My issue is resolved now. Thank you!