How do I display form field options vertically in multiple columns?

Site URL: https://www.devonmind.com/equal-opportunities-monitoring-form

Hi all,

I would like to format some form fields into columns, but displayed vertically. So for instance, if there are 15 radio button options, numbers 1-5 are in column A, followed by 6-10 in column B, and 11-15 in column C.

I've figured out what coding to add in order to split them into columns, but they display horizontally (i.e. 1 in column A, 2 in column B, 3 in column C, then back to A) and I'm not sure what tweak(s) I need to make.

Have attached screenshots which should hopefully help. There is custom code on the live site link I've provided, but hopefully you'll be able to decipher it and advise what I need to remove and add.

Thanks so much in advance! 🙂

Andre

On 8/11/2021 at 8:39 PM, Andre1990 said:

Site URL: https://www.devonmind.com/equal-opportunities-monitoring-form

Hi all,

I would like to format some form fields into columns, but displayed vertically. So for instance, if there are 15 radio button options, numbers 1-5 are in column A, followed by 6-10 in column B, and 11-15 in column C.

I've figured out what coding to add in order to split them into columns, but they display horizontally (i.e. 1 in column A, 2 in column B, 3 in column C, then back to A) and I'm not sure what tweak(s) I need to make.

Have attached screenshots which should hopefully help. There is custom code on the live site link I've provided, but hopefully you'll be able to decipher it and advise what I need to remove and add.

Thanks so much in advance! 🙂

Andre

Hi,

It looks like you solved this with multi columns.

Do you still need help?

On 8/14/2021 at 3:57 AM, tuanphan said:

Hi,

It looks like you solved this with multi columns.

Do you still need help?

Hi,

No I didn't solve it, it's still displaying horizontally rather than vertically. Do you have a solution?

Thanks,

Andre

@Andre1990

Would something like the following do the trick?

15 hours ago, creedon said:

@Andre1990

Would something like the following do the trick?

Thanks for your reply, however that still poses the same issue: options are presented from left to right, then wrapping onto the next line. I know how to do that, but I'm trying to see if there's a way to present options from top to bottom, equally split into columns. This is the preferred user experience.

Ah. I think I see now. More like the following?

On 8/24/2021 at 7:34 PM, creedon said:

Ah. I think I see now. More like the following?

Hiya - yes something like that would be perfect. Is it possible?

@Andre1990

The original URL is no longer valid so the potential solution I came up with may no longer be valid. Please post new URL for form.

On 9/28/2021 at 6:00 AM, creedon said:

@Andre1990

The original URL is no longer valid so the potential solution I came up with may no longer be valid. Please post new URL for form.

Sorry, the page is now located here: https://www.devonmind.com/find-help/support/equal-opportunities-monitoring

Thanks in advance if you've found a way to do it!

@Andre1990

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  /* begin What is your age group? */
  
    #radio-yui_3_17_2_1_1617205352576_36093 {
    
      display : grid;
      gap : 1em;
      grid-auto-flow : column;
      grid-template-columns : repeat( 4, 1fr );
      grid-template-rows : repeat( 4, 1fr );
      padding-top : 2em;
      
      }
      
    #radio-yui_3_17_2_1_1617205352576_36093 .title {
    
      position : absolute;
      
      }
      
    /* end What is your age group? */
    
  /* begin What is your current employment status? */
  
    #checkbox-17317fe1-ebae-456e-abf4-936366924e65 {
    
      display : grid;
      gap : 1em;
      grid-template-columns : repeat( 2, 1fr );
      padding-top : 4em;
      
      }
      
    #checkbox-17317fe1-ebae-456e-abf4-936366924e65 .description,
    #checkbox-17317fe1-ebae-456e-abf4-936366924e65 .title
    
      {
      
        position : absolute;
        
        }
        
    #checkbox-17317fe1-ebae-456e-abf4-936366924e65 .description {
    
      top : 2em;
      
      }
      
    /* end What is your current employment status? */
    
  /* begin What is your ethnic group? */
  
    #radio-yui_3_17_2_1_1617205352576_83176 {
    
      display : grid;
      gap : 1em;
      grid-template-columns : repeat( 2, 1fr );
      padding-top : 5.5em;
      
      }
      
    #radio-yui_3_17_2_1_1617205352576_83176 .description,
    #radio-yui_3_17_2_1_1617205352576_83176 .title
    
      {
      
        position : absolute;
        
        }
        
    #radio-yui_3_17_2_1_1617205352576_83176 .description {
    
      top : 2em;
      
      }
      
    /* end What is your ethnic group? */
    
  /* begin How would you describe your gender identity? */
  
    #checkbox-0f4f9e21-5492-4da5-bb81-b6500933fe58 {
    
      display : grid;
      /* gap : 1em; */
      grid-template-columns : repeat( 2, 1fr );
      padding-top : 4em;
      
      }
      
    #checkbox-0f4f9e21-5492-4da5-bb81-b6500933fe58 .description,
    #checkbox-0f4f9e21-5492-4da5-bb81-b6500933fe58 .title
    
      {
      
        position : absolute;
        
        }
        
    #checkbox-0f4f9e21-5492-4da5-bb81-b6500933fe58 .description {
    
      top : 2em;
      
      }
      
    /* end How would you describe your gender identity? */
    
  /* begin How would you describe your sexual orientation? */
  
    #checkbox-c64b1b76-0c80-431c-9cbc-e844039a3cfe {
    
      display : grid;
      /* gap : 1em; */
      grid-template-columns : repeat( 2, 1fr );
      padding-top : 4em;
      
      }
      
    #checkbox-c64b1b76-0c80-431c-9cbc-e844039a3cfe .description,
    #checkbox-c64b1b76-0c80-431c-9cbc-e844039a3cfe .title
    
      {
      
        position : absolute;
        
        }
        
    #checkbox-c64b1b76-0c80-431c-9cbc-e844039a3cfe .description {
    
      top : 2em;
      
      }
      
    /* end How would you describe your sexual orientation? */
    
  </style>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

@creedon Hi! Can you help me do this as well? I would like this on the form at the bottom of the homepage at www.shannonbruceramaka.com so that the radio options (6) are in two columns of 3. Thanks! 

6 hours ago, Matthew26 said:

Can you help me do this as well?

Remove the following custom code form your site.

<style>
  .checkbox>div:nth-child(n+3) {
    float: left;
    width: 50%;
}
</style>

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  /* begin Your Interests */
  
    #checkbox-d97a8495-ce17-44a6-aafb-40f908d0bea4 {
    
      display : grid;
      gap : 1em;
      grid-template-columns : repeat( 2, 1fr );
      
      }
      
    #checkbox-d97a8495-ce17-44a6-aafb-40f908d0bea4 legend {
    
      grid-area : 1 / -1 / 1 / -1;
      
      }
      
    /* end Your Interests */
    
  </style>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

On 10/12/2023 at 9:46 PM, creedon said:

Remove the following custom code form your site.

<style>
  .checkbox>div:nth-child(n+3) {
    float: left;
    width: 50%;
}
</style>

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  /* begin Your Interests */
  
    #checkbox-d97a8495-ce17-44a6-aafb-40f908d0bea4 {
    
      display : grid;
      gap : 1em;
      grid-template-columns : repeat( 2, 1fr );
      
      }
      
    #checkbox-d97a8495-ce17-44a6-aafb-40f908d0bea4 legend {
    
      grid-area : 1 / -1 / 1 / -1;
      
      }
      
    /* end Your Interests */
    
  </style>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Hey @creedon Thanks for this. I see it mostly works, however the 'gap' does not work. I can see that the text then wraps and stacks on each other rather than extending to the right, if that makes sense. See the images for reference. Thanks! 

8 hours ago, Matthew26 said:

I see it mostly works,

It would work better if you remove the code I suggested. They are working at cross purposes.

Quote

the 'gap' does not work

gap does work. Here it is set to 5em.

45 minutes ago, creedon said:

It would work better if you remove the code I suggested. They are working at cross purposes.

gap does work. Here it is set to 5em.

🤦‍♂️ I see now. Forgot to remove the injected code like you suggested. Works like a charm now. Thanks again!