Recent searches
No recent searches
Trouble modifying alignment of custom fields in a form on guides
Answered
Posted May 01, 2023
Hi 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?
1
8
8 comments
Christopher Kennedy
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?
0
Chris Gregory
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?
0
Christopher Kennedy
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:
2
Chris Gregory
Christopher Kennedy this worked! You are a King amongst Chrises! Thank you!
1
Christopher Kennedy
0
Chris Wooten
Christopher Kennedy
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.
0
Christopher Kennedy
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?
0
Permanently deleted user
Christopher Kennedy
What code modifications do I need to make if i want to align the checkbox with the text. I mean its an agreement, we are asking to approve. Its a bit of long text and I want to have the text box aligned with the text rather than below the text. Also, its important to note that, I want this change just for one specific form. How do I achieve this ? Can you help me with the custom code ?
Appreciate your help in advance.
0