[Gelöst] Styling Checkboxes In CRED

[Author]

Artikel

[Jo4nny8]

Im trying to get my checkboxes on my CRED Form in a horizontal list, rather than the default vertical list.

Im a noob with anything like this and google is normally my best friend but it seems to be really difficult.

My code is the auto generated form

This is the auto code that i assumed i could add some form of display option (like inline or something) to change them from vertical to horizontal

<div class="cred-field cred-field-was-the-sales-designer-polite-and-courteous">
<label class="cred-label">Was the sales designer polite and courteous?</label> [cred_field field="was-the-sales-designer-polite-and-courteous" post="reviews" value="" urlparam=""]
</div>

Can anyone help?

[Waqas Supporter Languages: Englisch (English ) Timezone: Asia/Karachi (GMT+05:00)]

You can use following CSS to achieve the said results:

.wpt-form-item-radio {
    display: inline-block;
    margin-right: 10px;
}

This addresses all radio box fields. You can make it specific to your own field by inspecting through the browser's inspect element.

Please add this to your form's CSS editor.

[Jo4nny8]

That worked brilliantly thank you.

However i now need to style the check boxes too. I tried the obvious:

.wpt-form-item-checkbox { (and i tried just 'check'
display: inline-block;
margin-right: 10px;
}

But that doesn't work 🙁

Is there a way to change them to a dropdown selection rather than check boxes as it shows all sub categories of my wp-types categories?

[Waqas Supporter Languages: Englisch (English ) Timezone: Asia/Karachi (GMT+05:00)]

To display categories as a select box, you can change the 'display' parameter of the short code to 'select', like below:

[cred_field field="category" display="select" single_select='true']

This will display a single select drop down, if you want to allow a multi-select, either remove 'single_select' parameter or set it to 'false'.

To style the category checkboxes, you can use following CSS:

.wpt-form-set-checkboxes {
    float: left;
    width: 100%;
}

.wpt-form-set-checkboxes li {
    float: left;
    width: 33%;
}

.wpt-form-set-checkboxes li input {
    float: left;
    margin-right: 5px;
}

.wpt-form-set-children {
    width: 100%;
    float: left;
}

.wpt-form-set-children li {
    float: left;
    width: 25%;
    padding-right: 35px;
}

.wpt-form-set-children li input {
    float: left;
    margin-right: 5px;
}

li[class^='tax-children-'] {
    clear: both;
    width: 100%;
}

This will look like as attached screen shot.

[Jo4nny8]

Thank You all sorted now

[christopherB-5]

Is there any way to get these checkboxes columns to be responsive, so that at a certain size, they reduce from 3 columns to 2? and/or from 2 to 1?

Trying to make this mobile-responsive.

Thanks