Trouble modifying alignment of custom fields in a form on guides | Community
Skip to main content

Trouble modifying alignment of custom fields in a form on guides

  • May 1, 2023
  • 8 replies
  • 0 views
C

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?

      8 replies

      C
      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?
      C
      • Chris15
      • Author
      • May 5, 2023

      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?

       

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

        C
        • Chris15
        • Author
        • May 10, 2023

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

          C
          No problem!
          C
          • Chris113
          • May 22, 2023

          @christopher53

          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.

          C
          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?
           
          A
          • Anonymous
          • July 29, 2024

          @christopher53 

           

          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.

           


           

          Terms & ConditionsCookie settingsAccessibility statement