[Resolved] Checkbox position

[Author]

Posts

[nilsM]

Hey there,

I have to issues with checkboxes, first on this page:
hidden link
I want that the copy "Hiermit bestätige ich dass ich mit den Datenschutzbestimmungen einverstanden bin*" is in the same line with the checkbox above.

Then the other problem is here:
hidden link

There are two checkboxes and both are placed in the middle of the copy instead in front of it.

Is it possible to provide CSS for these issue or do you have another solution?

Thanks and all the best
Nils

[Christian Cox]

Hello, I'll be glad to help adjust the positioning of these checkbox elements. I think some CSS is required, but it's a small amount.

Issue 1: Checkbox and label are on separate lines.
I see what you are describing, and I think a CSS approach is the best solution here. It seems that your site's theme includes the Bootstrap v3 library. That library gives you access to several built-in features, and one of those is a CSS class that helps simplify inline form element display. The CSS classname is forms-inline, and you can find information about that class available in the v3 documentation here:
https://getbootstrap.com/docs/3.4/css/#forms-inline

In testing, I was able to add the form-inline CSS class to the .form-groupdiv containing the "Zu unseren daten..." text and the checkbox and label. If you are using the Form Builder expert mode, you can find the corresponding div in the Form builder code and add the form-inline CSS classname there. See the issue-1.png screenshot here for a more detailed visual representation of the change I am describing, and the results in the browser (Chrome on a Mac).

Issue 2: Checkboxes appearing centered in label text instead of before label text.
Okay I see, again the form-inline CSS class can help solve most of this problem. If you can add the form-inline CSS class to the .form-group div containers for both of these checkboxes groups, you can see in the attachment issue-2-part-1.png that the checkbox moves to the beginning of the line. There is still a matter of left-margin and left-padding, as the checkbox is not left-aligned. Your theme applies margin-left:3em; and does not specify padding-left, so the built-in browser padding rule takes effect. I suggest adding some CSS in this Form editor screen like the following:

.form-group.form-inline ul.wpt-form-set-checkboxes {
  margin-left:0;
  padding-left:0;
}

If you are not familiar with this type of CSS change in the Form builder expert mode, or if you are using the drag-and-drop Form builder, I will be glad to log in and take a look at your User Forms and make the required changes or suggest an alternative approach. Let me know how you would like to proceed.

[nilsM]

My issue is resolved now. Thank you!