[Resolved] CSS Styling CRED Forms

[Author]

Posts

[danM-7]

Tell us what you are trying to do?

I am trying to adjust the width of the 'middle initial' input field on a CRED add custom post form the at I built. I see where I can place the custom CSS on the Edit CRED Post Form page, but I can't figure out the correct CSS to use to adjust the width. I want the middle initial field to allow entry of 1 character. I believe this is fairly simple but can't find any information on the styling documentation Toolset pages or the Internet.

Is there any documentation that you are following?

Is there a similar example that we can see? Here is the THTML for the field information on the CRED form:

<label class="cred-label">
Middle Initial
</label>
[cred_field field='middle-initial' post='student' value='' urlparam='' ]
</div>
<div class="cred-field cred-field-last-name">
<label class="cred-label">

What is the link to your site? hidden link

I will have to set you up with a login if you need to see CRED form, just let me know.

[Christian Cox]

Hi, if you want to adjust the width of an input field, you can use the CSS attribute selector syntax:
https://www.w3schools.com/css/css_attribute_selectors.asp

In the CRED form, each field's name is "wpcf-" plus the field slug, so the selector for your field is:

input[name="wpcf-middle-initial"] {
  width: 40px; /* change this width to suit your needs */
}

You also mentioned that you want the field to "allow entry of 1 character". If you mean you want to prevent users from entering more than 1 character in this field, then that is not something CSS can help with. CSS can help you modify the physical dimensions of the input field, but it can't help you validate or limit the number of characters inside it. For that you need additional custom code using JavaScript and / or PHP to perform custom field validation. We offer the CRED API cred_form_validate to help with that type of validation.
https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_validate

[danM-7]

Thank you, that is exactly I needed know.

[danM-7]

That worked great for the text field inputs, thank you. After reviewing the material at w3school, I tried to adjust the width of a dropdown item. I added the following CSS in the CSS Editor of the CRED Edit Post Form:

select {
    width: 50%;
 }

but it did not have any effect on the width of dropdown select box sizes in the form. I also tried different px values and that did not have any effect. The HTML source for one of the dropdowns is shown below.

<div class="cred-field cred-field-student-status">
			<label class="cred-label">
Student Status
</label>
			<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="select-wpcf-student-status">
<select id="cred_form_1070_1-select-1-1522848424"  class=" wpt-form-select form-select select" output="" preset_value="" urlparam="" value_escape="" make_readonly="" placeholder="" select_text="" data-wpt-type="select" name="wpcf-student-status">
<option value="" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status" selected="selected">--- not set ---</option>
<option value="New" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status">New</option>
<option value="Assessed" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status">Asssessed</option>
<option value="Matched" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status">Matched</option>
<option value="Resumed" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status">Resumed</option>
<option value="Inactive" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status">Inactive</option>
<option value="Exited" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status">Exited</option>
<option value="Terminated" class="wpt-form-option form-option option" data-wpt-type="option" data-wpt-id="cred_form_1070_1_cred_form_1070_1-select-1-1522848424" data-wpt-name="wpcf-student-status">Terminated</option>
</select>
</div>

[Christian Cox]

The same principle applies, but you must target select tags instead of input tags.

select[name="wpcf-student-status"] {
    width: 50%;
}

If that does not work, you may need to add some specificity to your CSS to override styles provided by your theme and other plugins: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

[danM-7]

Thanks for the quick answer, it worked.