[Resolved] CRED checkboxes

[Author]

Posts

[zeljko-turkaljS]

Hi,

can you please help me how to align a checkboxes values in columns. I need to add 159 USA Georgia Counties, and they will be displayed in one row. Is it possible to style them in four columns?

hidden link

Thanks
Sasa

[zeljko-turkaljS]

And also, one weird situation, do you have a limitation on how many values can I add on checkboxes? Because when I add 101 value, some of my previous fields are deleted in this particular CPT...

Please take a look at this video...

hidden link

[Luo Yang]

Hello,

Thanks for the screenshot and video.
Q1) can you please help me how to align a checkboxes values in columns.

It is possible with some custom CSS codes, for example, you can edit your form, in section "Form editor", click "CSS editor", add below CSS codes:

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

More help:
https://toolset.com/documentation/user-guides/styling-cred-forms/

Q2) do you have a limitation on how many values can I add on checkboxes?
No, there isn't any limitation in Toolset side, but there might be some limitation in your webserver side, I suggest you try to increase your server limitation, please try these:
1) check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

2) try to increase PHP max_input_vars limitation of your webserver, for example this thread:
https://stackoverflow.com/questions/10303714/php-max-input-vars

More help:
hidden link

[zeljko-turkaljS]

Awesome, thanks Luo 🙂

I just one more help... I have to checkbox fields (Industry and Location).

Industry values are a bit long, and they need to be at least 49% width (two columns). Can I assign different CSS class style to this checkbox values?

This is how it looks like now, locations are awesome, but Industry is not ok... hidden link

This is my code:

<div class="form-group">
<label>GABB Location</label>
[cred_field field="gabb-locations" force_type="field" class="form-control" output="bootstrap"]
</div>
<div class="form-group">
<label>GABB Industry</label>
[cred_field field="gabb-industry" force_type="field" class="form-control" output="bootstrap"]
</div>

and CSS that you have give me:

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

Also, this CSS is not working in mobile version, so I will need custom CSS class to assign different stylesheet in mobile version.

[Luo Yang]

For the new questions:
Q1) Can I assign different CSS class style to this checkbox values?
Yes, it is possible. I assume both checkboxes fields are created with Types plugin.

You can try these:

/* GABB Industry */
ul.wpt-form-set-checkboxes-wpcf-gabb-industry li{
  display:inline-block;
  width: 49%;
}

Q2) Also, this CSS is not working in mobile version
You can follow below document to setup your CSS codes:
hidden link

For example:

/* mobile version */
@media (max-width: 600px) {
    ul.wpt-form-set-checkboxes-wpcf-gabb-industry li{
      width: 100%;
    }
}

If you need more assistance for it, please create new thread for it, we prefer one question one ticket.

[zeljko-turkaljS]

My issue is resolved now. Thank you!