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

image avatar

Christopher Kennedy

Zendesk Developer Advocacy

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?

0


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


image avatar

Christopher Kennedy

Zendesk Developer Advocacy

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)';
});
 
 

2


Christopher Kennedy  this worked! You are a King amongst Chrises! Thank you!

1


image avatar

Christopher Kennedy

Zendesk Developer Advocacy

No problem!

0


image avatar

Chris Wooten

Zendesk Luminary

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


image avatar

Christopher Kennedy

Zendesk Developer Advocacy

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?
 

0


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


Please sign in to leave a comment.

Didn't find what you're looking for?

New post