Trouble modifying alignment of custom fields in a form on guides
AnsweredHi All,
I've created a user facing from on guides with some conditional check boxes that are supposed to show other fields when they are check... unfortunately they are aligned vertically and it looks like butt. I have them in a section with these styling attributes:
.form-container {
display: flex;
flex-direction: column;
}
Below is the closest I've gotten to getting them to look nice, but is also ruined the spacing on all the other fields in the section.
const checkboxes = document.querySelectorAll('.form-field.boolean.optional');
const checkboxContainer = checkboxes[0].parentNode;
checkboxContainer.style.display = 'flex';
checkboxContainer.style.flexWrap = 'wrap';
checkboxContainer.style.justifyContent = 'space-between';
checkboxes.forEach((checkbox) => {
checkbox.style.margin = '10px';
checkbox.style.width = 'calc(20% - 20px)';
});
Any advice out there?
-
Hi Chris,
I'd like to make sure I understand your end goal. Are the fields not appearing in your desired sort order? Or is it specifically the positioning? Can you provide some details about what you're looking to see?
-
Christopher Kennedy the sort order is correct. This is purely aesthetic. I don't think all that white space to the right of the check boxes looks really good and it lengthens the form to the point that I think it affects the user experience, especially on mobile. Ideally I would just put the checkboxes in their own container and set their positioning in that space, but I don't think we can affect the html of the form itself from guides admin except through the css and js files, right?
-
Hi Chris,
Thanks for the helpful context. Adding a container specifically for the checkboxes would be the simplest approach, to allow you to apply flex properties to just the checkboxes rather than the entire form. Because the structure of the form content cannot be edited before rendering, this would require custom JS. But it wouldn't be too far from the sample you provided. Here's a custom example added to the Copenhagen theme:
const checkboxes = document.querySelectorAll('.form-field.boolean.optional');
const parentForm = checkboxes[0].parentNode;
// create the new checkbox container
const checkboxContainer = document.createElement("div");
checkboxContainer.classList.add('checkbox-container');
// insert the new container before the first checkbox
parentForm.insertBefore(checkboxContainer, checkboxes[0]);
checkboxContainer.style.display = 'flex';
checkboxContainer.style.flexWrap = 'wrap';
checkboxContainer.style.justifyContent = 'space-between';
checkboxes.forEach((checkbox) => {
// move the checkboxes to the new container
checkboxContainer.appendChild(checkbox);
checkbox.style.margin = '10px';
checkbox.style.width = 'calc(20% - 20px)';
});
-
Christopher Kennedy this worked! You are a King amongst Chrises! Thank you!
-
No problem!
-
Hey all I am new at customizing the guide. Does this go into the JS file? Is there something else needed to make this work? I cannot get this working in my lab guide for my requests.
-
Hi Chris,
You can add custom JS to your Guide theme in the theme's script.js file. Can you share some more details about what you're expecting to see vs. what you're actually seeing?
Please sign in to leave a comment.
7 Comments