Skip Navigation

[Résolu] Styling Checkboxes In CRED

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created Il y a 7 années. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Marqué : 

This topic contains 5 réponses, has 3 voix.

Last updated by christopherB-5 Il y a 6 années et 11 mois.

Assigned support staff: Waqas.

Auteur
Publications
#324326
CRED Form Radio Buttons Styling.png

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?

#324361

Waqas
Supporter

Languages: Anglais (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.

#324411
Styling Check Boxes.png

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?

#324583

Waqas
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

CRED - style category checkboxes.png

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.

#328937

Thank You all sorted now

#445577

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

Le forum ‘Types Community Support’ est fermé à de nouveaux sujets et réponses.