[Resolved] styling checkboxes for my form

[Author]

Posts

[lucyS]

I'm trying to create a front-end post form with checkboxes for various taxonomies.

I'm using the Form wizard but the checkboxes on the front end are all squished up. I don't know how to write css and can't space them out or hide them inside the dropdown checkboxes.

Heres the form:

[credform]
<div class="form-group ">
<label>Your Name</label>
[cred_field field='post_title' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Your Profile</label>
[cred_field field='_featured_image' output='bootstrap']
</div>
<div class="form-group ">
<label>Year Levels</label>
[cred_field field='year-level' force_type='taxonomy' output='bootstrap' display='select' single_select='true']
</div>
<div class="form-group ">
<label>Locations</label>
[cred_field field='location' force_type='taxonomy' output='bootstrap' display='select']
</div>
<div class="form-group ">
<label>Post School Options</label>
[cred_field field='post-school-option' force_type='taxonomy' output='bootstrap' display='select']
</div>
<div class="form-group wpt-form-set-checkboxes">
<label>Jobs</label>
[cred_field field='job' force_type='taxonomy' output='bootstrap' display='select']
</div>
<div class="form-group ">
<label>About You</label>
[cred_field field='post_content' output='bootstrap']
</div>
<div class="form-group hidden">
<label>Schools Student Profiles</label>
[cred_field field='@school-student-profile.parent' class='form-control' output='bootstrap' select_text='--- not set ---']
</div>
[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
[/credform]

and CSS:

.hidden { display:none }

.wpt-form-set-checkboxes {
padding: 6px 12px;
}

[Luo Yang]

Hello,

There might be some CSS conflicts/Broken HTML div tags in your website, I suggest you check these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate other plugins, and switch to wordpress default theme 2019, deactivate all Custom code snippets, and test again

3) If the problem still persists, please provide database dump file of your website in below private message box:
https://toolset.com/faq/provide-supporters-copy-site/

I need to test and debug it in my localhost.

[lucyS]

The form works fine on mobile and safari, it’s just playing up on Chrome. Is there some way to wrap the form CSS so it’s independent of the Chrome styling?

The alternative is to display the taxonomies as checkboxes, however when I do this the checkboxes are ugly and have weird bullet points for the child categories. Is there a way to remove the child categories (so limit categories in the checkboxes) or use CSS to style the checkboxes? I'm new to CSS, and have spent hours playing around with the bootstrap elements etc. but can't work out what to add to fix the problem.

Thanks

[Luo Yang]

For your new questions:

Q1) Is there some way to wrap the form CSS so it’s independent of the Chrome styling?
There isn't such kind of feature within Toolset plugins, you might need to consider custom codes, for example this thread:
https://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only

Q2) Is there a way to remove the child categories (so limit categories in the checkboxes) or use CSS to style the checkboxes?
You can follow our document to style the checkboxes fields
https://toolset.com/documentation/user-guides/styling-cred-forms/
section "Set of checkboxes"

[lucyS]

Ok, thanks, but your answer to Question 2 doesn't actually help me.

I'm following the guidelines in the 'styling cred forms' page but there is no correlation between that and what I actually need to achieve. Is it possible to give me an example of what the CSS should look like to remove styling from the checkboxes. I'm trying to use list-unstyled from the bootstrap reference guide but no matter where I put it nothing changes.

To be honest this is really frustrating. You've created a fantastic and powerful tool for non-developers, but we can't use it because the forms look terrible. I need more CSS examples, or even examples of forms in modules so i can copy what you've done.

[Luo Yang]

Since it is a custom CSS codes problem, please provide a live problem page URL, also describe details for the question:
Is it possible to give me an example of what the CSS should look like to remove styling from the checkboxes
Take a screenshot for what you want to achieve.

I need to test it in my Chrome browser. thanks

[lucyS]

Live page - hidden link

First screen shot is what i have, second is what i want.

This is what I'm using now:

[credform]
<div class="form-group ">
<label>Student Profile Title</label>
[cred_field field='post_title' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Student Profile Content</label>
[cred_field field='post_content' class='wpt-form-set-checkboxes' output='bootstrap']
</div>
<div class="form-group">
<label>Jobs</label>
[cred_field field='job' force_type='taxonomy' output='bootstrap' display='checkbox']
</div>
[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
[/credform]

CSS:

.form-group {
padding:10px
}

.wpt-form-set-checkboxes {
list-style-type: none;
margin: 0;
padding: 0;
}

It's still not working.

Thanks

[Luo Yang]

I have tried the URL you mentioned above, but can not see the post form, and get this error message":
Permission denied

see screenshot: Permission-denied.JPG

I have compared the screenshots you provided above, it seems that you are going to
1) display the checkboxes in two columns,
You can try below CSS codes:

.wpt-form-set-checkboxes li{
	width:48%;
	display: inline-block;
}

2) Don't want to display child terms
You can try below CSS codes:

.wpt-form-set-checkboxes li[class^="tax-children-of-"]{
	display: none;
}

It is only a demo CSS codes for your reference.

[lucyS]

Yes, I have no idea why permission denied is showing now... I've double checked all the permissions in Access, and even when I deactivate Access it still doesn't show up.

I've deactivated all plugins and gone to a different theme and it's still happening for all non-admin users.

On a subsite with the same network activated plugins and theme its working fine. I had issues as well with relationship fields not showing up when editing custom posts, which seems to be resolved once I went into the post and resaved it.

I've tried deleting Toolset and reinstalling but it's reinstalled all my settings. Is there a way to clean the slate?

Thanks,

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/why-permission-denied-is-showing-now/

[Luo Yang]

For the new question: why permission denied is showing now ...
Please check the new thread here:
https://toolset.com/forums/topic/why-permission-denied-is-showing-now/

For the original question of this thread, please try as I mentioned above:
https://toolset.com/forums/topic/styling-checkboxes-for-my-form/#post-1225533

If you need more assistance for it, please provide your website credentials in below private message box.