Adding Containers

Note: Containers are not used with Mobile SDK Programs.

Note: The example containers provided in the Digital Feedback module are WCAG 2.1 AA compliant.

A "container" is what the survey is displayed in; effectively a style sheet for the survey overlay. Set up a container to specify the size of the survey overlay, it’s location in the website window, and its look-and-feel, so you can for example make the survey match the style of the website where the survey is to appear. You can set up any number of containers for a project, perhaps setting them up to position the survey overlay in different locations in the website window for different contexts, or giving them different colors depending on which website page they are opened from. Note that for new programs, the survey overlay will by default automatically re-size to fit the question that is being presented. For older existing programs, the auto-re-size function can be switched on.

1. Click the Containers icon in the side-bar.

2. Click + in the Containers header bar.

   The New container overlay opens.

   
   Figure 1 - The New container overlay

3. Type in a logical name for your container, perhaps based on the container’s styling. Note that you can add as many containers to a program as you wish, but container names must be unique for the current program; duplicates are not allowed.

   Note: To rename a container, open the container, click into the Container name field at the top of the Script page, and edit the name as required. Click out of the field on completion.

4. Click OK.

   The Container creation page opens.

   
   Figure 2 - The container creation page

Default HTML/CSS markup is provided but this is just an example. You can edit this code as necessary to achieve the desired effects or write your own.

The Actions icon () for the container opens the Actions menu (The Containers Action Menu).

Auto-height

New containers use Auto-height (where the container grows and shrinks automatically to match the survey page content’s height) by default. The Auto-height rule is applied by the data-auto-height attribute on the root element of the Container markup (this exists in the default Container markup).

Note that even with the data-auto-height attribute in place, auto-height is turned off by default for small/mobile devices where the screen width or height is less than 640px. For these devices the container is displayed full screen.

If you wish to adjust the threshold for mobile detection, you must:

1. Add the data-mobile-threshold attribute to the root element of Container markup, as:

                         data-mobile-threshold=340
                       

   In this example the auto-height rule (if enabled) will apply for devices where both the screen width and height are greater than 340px.

2. Adjust media queries for the Container CSS to match the new threshold if required.

The script in line 1 in the Markup field would then be:

                <div data-auto-height data-mobile-threshold=340 class="__ container cf-container-wrapper">
...
</div>
		

Opening the Containers Action Menu

Click the Action icon () for the container to open its Action menu.

Figure 3 - Opening the Containers Action menu

Click Copy name to copy the container name onto your clip-board. You can then paste it elsewhere into the program code where it may be needed, for example into the Scenario script (Adding Scenarios).

Click Delete to remove the container from the program.