Have you ever wanted to align questions into columns within a survey, or put questions next to each other on the page? The easiest way to achieve this is with the Custom Group question type which allows you to group multiple questions together and control whether they display on the same line.
In most cases, the Custom Group question will meet your layout needs, but if you prefer to use individual questions or if you've already built your survey, we have a workaround!
You can add a CSS Class Name to your question and some CSS Code to your Style tab to manipulate the width of the survey page.
The primary concept is that the survey has a total width of 100%, and you decide how much width, by percentage, a particular question will take up on the survey. If you wish to have two questions next to each other in 2 columns, you would set them both to 50% width. If you wanted 3 columns, you could use 33% width, and so on.
The final concept is to understand that your questions will now be arranged left-to-right if using the below method until the full 100% width is filled, then they will move top to bottom.
How do I set it up?
First, add one or all of the below CSS codes that you wish to apply to your questions to your survey theme. To do so go to the Style tab and scroll to the bottom of the survey preview to access the link for the HTML/CSS Editor. The below codes should be placed in the field on the Custom CSS tab.
/*To specify that the question take up 50% of the page*/
.width-50{
clear: none;
float: left;
width: 50%;
}
OR
/*To specify that the question take up 33% or 1/3 of the page*/
.width-33{
clear: none;
float: left;
width: 33%; }
OR
/*To specify that the question take up 25% or 1/4 of the page*/
.width-25{
clear: none;
float: left;
width: 25%; }
Next, edit the first question you wish to restrict to a specific width. On the Layout tab, scroll to the bottom to find the CSS Class Name field and add the corresponding class name for the width you wish to apply: width-50 for 50%, width-33 for 33% or width-25 for 25%.
A Note About Browser Differences
There may be variation in how different browsers render the sg-width CSS Class Name. If you specify an odd sg-width that adds up to more than 100% e.g. width-33, most browsers will split this in half properly, however Internet Explorer will divide odd numbers by 2 and round up. Because this adds up to more than the page width, this will cause one of the questions to get dropped to the next line.
— Adam on 08/27/2015
Response to Jeffrey Henning's question: I had the same issue. You have to click "edit" on each individual text box within the question grouping, then click "layout", and scroll down and deselect "line break". That will bring your text boxes up next to each other.
Admin
— Bri Hillmer on 04/21/2015
@Jena: I'm not sure of a way to achieve this with the continuous sum question given the structure of the HTML of that question. I will definitely pass this along to our development team for discussion for future improvements!
Bri
Documentation Coordinator/Survey Sorceress
SurveyGizmo Customer Support
— Jena on 04/21/2015
I'm trying to split the answer options for one question (continuous sum) into two columns instead of one long list. Would the code be something similar to this?
Admin
— Bri Hillmer on 03/11/2015
@Jeffrey: Thanks for taking a look at documentation! It sounds like the Custom Group would work for you. Within each subquestion of a Custom Group you can control whether or not you would like a line break.
Check out the documentation here:
http://surveygizmov4.helpgizmo.com/help/article/link/custom-group
Bri
Documentation Coordinator/Survey Sorceress
SurveyGizmo Customer Support
— Jeffrey Henning on 03/11/2015
Close, but want to display two text boxes within one question side by side: Years, Months.