Scroll

Merge two loops together on a single screen, side-by-side, horizontally

Follow
Summary How to merge two loops together on a single screen, horizontally
Applies to Askia Design
Written for Survey Designers
Keywords loop ; loops ; grid ; grids ; merge ; horizontal ; side by side

Click here to download attached demo QEX.

Method #1: 

Step 1: Create your two loops:

Step 2: generate your two loop screens:

Step 3: merge the two loop screens:

Step 4: resize the element properties and align them next to each other horizontally on the screen:

Step 5: if done correctly, once you press the "IE Preview" tab on the screen, you should see the following:

Nothing fancy, but the good thing about this is that the tables are generated using HTML, so you can always go in and modify any borders/padding/colors/text/layouts, etc.


Method #2:

Step 1: (same as step 1 in method #1) create your loop (except this time, create two questions under a single question table loop):

Step 2: generate your two loop screens:

Step 3: go into each screen and right-click on the response block, choose "properties", and go to the "Response Block" tab and select the "VERTICALGRID" library template:

Do this for both loop screens. They should end up looking like this: 

Step 4: merge the screens:

Step 5: resize and line up the question captions and response blocks horizontally:

Step 6: highlight both response blocks, right-click and go to "Properties" and add/remove the following:

Remove: style="width:100%;" from the "Table tag", so the only thing that's left is cellspacing="0"

Add: height:65px;width:50px; to "Styles - Default - Style property"

Add: vertical-align: bottom;border-bottom:1px solid #CFCFCF;height:65px;width:50px; to "Rows - Row 1 - Style property":

Step 7: Now that we've made changes to BOTH of the loop response block properties, we need to make some changes to the INDIVIDUAL response block properties.

Highlight the response block that shows up to the right (the second loop's responses) and "right-click - properties" and go to "Columns - Column 1 - Style property" and add the following line: display: none;

Step 8: Highlight the response block that shows up to the left (the first loop's responses) and "right-click - properties" and go to "Columns - Column 1 - Style property" and add the following line: width:380px;

Step 9: save the changes. When you're done, you can click the "IE Preview" tab and you should see the following result of your work:

 

I've attached a QEX demonstrating Method #2 to the article, which can be downloaded here.

 

 

 

Have more questions? Submit a request

Comments