Where are the forms classes?

Support Themes & Styling
6

Hi @Ptarmic and @tom0360.

I’ve copied checkbox.html.twig in mytheme/templates/forms/fields/ to test its align. I have a problem with this field (you can see in another post https://discourse.getgrav.org/t/align-input-checkbox-in-contact-form-deliver-theme/14269. I’ve followed your suggestions but not success result.

In my case, for example, this field (checkbox) has something that I can’t get find in any styles css sheet.

Selection_021
Selection_021968×615 10 KB

This is the final result of form code, with checkbox field without custom css (with original plugin css).

Selection_022

You can see some left and right margin or padding in checkbox field. In the form-styles.css (from form plugin), I’ve only found the following related with checkboxes and label fields:

.checkboxes { display: inline-block; }
.checkboxes label { display: inline; cursor: pointer; position: relative; padding: 0 0 0 20px; margin-right: 15px; }
.checkboxes label:before { content: ""; display: inline-block; width: 20px; height: 20px; left: 0; margin-top: 0; margin-right: 10px; position: absolute; border-radius: 3px; border: 1px solid #e6e6e6; }
.checkboxes input[type=checkbox] { display: none; }
.checkboxes input[type=checkbox]:checked + label:before { content: "\2713"; font-size: 20px; line-height: 1; text-align: center; }
.checkboxes.toggleable label { margin-right: 0; }
.form-field-toggleable .checkboxes.toggleable { margin-right: 5px; vertical-align: middle; }
.form-field-toggleable .checkboxes + label { display: inline-block; }

In checkbox.html.twig you can see:

<label style="display:inline;" class="inline" for="{{ id|e }}">
   {% if field.markdown %}
       {{ field.label|t|markdown(false) }}
   {% else %}
       {{ field.label|t|e }}
   {% endif %}
   {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
</label>

When you select the checkbox in Chrome Inspector it shows the following:

<input name="data[privacy]" value="1" type="checkbox" id="privacy" class=" " required="required">

You can check my contact form in this address:

http://grav.hukawati.es/contacto

I don’t understand why checkbox.html.twig refers to the ‘inline’ class and yet if you make any changes to it it has no effect.

I hope any idea for solve this issue.

Thanks so much.