Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Table of Contents

Content

The content section is the middle part of the screen between the header and footer. By default it automatically selects a control for the question type, e.g. a date selector for a date question. By specifying a custom content object, more styles are available. This is especially useful for customizing lists.

color and colorDark

By default, the content background color is taken from the settings sheet. However, it is possible to override it on an individual page.

type bind::ct:content.color bind::ct:content.colorDark
select_one... #a0b0c0 #102030
surveychoicessettings

frameWidth

Frame width around the content area of the page. Default is 16.

type name bind::ct:content.frameWidth
select_one animal animal 0
surveychoicessettings

In this case, frameWidth was set to 0 in the second image.

style

The visual appearance of the question.

type name bind::ct:content.style
select_one animal animal IconOnly
surveychoicessettings

For select_one questions

  • (not specified)
  • IconOnly
  • TextOnly
  • TextBesideIcon
  • TextUnderIcon

For select_multiple questions:

  • (not specified)
  • IconInlay
  • IconOnly
  • TextOnly
  • TextBesideIcon

For number list groups:

  • (not specified)
  • IconOnly
  • TextOnly
  • TextBesideIcon

Number lists are a set of questions inside a group. The appearance column must be set to field-list to force all group questions to appear on the same page:

type name label bind::ct:content.style appearance
begin group numberlist Number list IconOnly field-list
integer number1 Number 1
integer number2 Number 2
integer number3 Number 3
integer number4 Number 3
integer number5 Number 5
end group
surveychoicessettings

For range questions:

type name parameters bind::ct:content.style bind::ct:content.columns
range animal_count start=1 end=100 step=1 Grid 5
surveychoicessettings

For a fixed number of image questions:

type name label bind::ct:content.style appearance
begin group photogroup Group photos Grid field-list
image image1 Photo
image image2 Photo 2
image image3 Photo 3
image image4 Photo 4
end group
surveychoicessettings

For a dynamic number of image questions:

type name label bind::ct:content.style
begin repeat photogroup Repeat photos Grid
image image Photo
end repeat
surveychoicessettings

Ignored for other question types.

padding

The padding space between grid items. Requires style to be set.

type name bind::ct:content.padding
select_one animal animal 8
surveychoicessettings

Padding values are 0, 4 and 8.

columns

Number of columns for grids. Requires style to be set. Defaults to 2.

type name bind::ct:content.style bind::ct:content.columns
select_one animal animal Grid 4
surveychoicessettings

For example, column values below are 3, 5 and 10.

lines

Show lines between cells for grids. Requires style to be set. Defaults to true.

type name bind::ct:content.style bind::ct:content.lines
select_one animal animal IconOnly no
surveychoicessettings

lines value below is yes and no.

border

Show border around the outside of a grid. Requires style to be set. Defaults to no if frameWidth is 0, yes otherwise.

type name bind::ct:content.style bind::ct:content.border
select_one animal animal IconOnly yes
surveychoicessettings

Border value is yes and no.

borderWidth

Border width for grid lines. Requires style to be set. Defaults to 2.

type name bind::ct:content.style bind::ct:content.borderWidth
select_one animal animal IconOnly 2
surveychoicessettings

borderWidth value is 2 and 4.

fontSize

Size text font size. Requires style to be set. Defaults to 16. Note that the font is subject to scaling according to the Font size in the main Settings page.

type name bind::ct:content.style bind::ct:content.fontSize
select_one animal animal IconOnly 14
surveychoicessettings

fontSize values are 10, 14 and 18.

fontBold

Set font to bold. Requires style to be set. Defaults to false.

type name bind::ct:content.style bind::ct:content.fontBold
select_one animal animal IconOnly yes
surveychoicessettings

itemHeight

Set height of individual items. Requires style to be set. Defaults to 48.

type name bind::ct:content.style bind::ct:content.itemHeight
select_one animal animal IconOnly 48
surveychoicessettings

itemHeight values are 48, 64 and 128.

qml

A QML fragment to use instead of the built-in content. See Developer section. For example:

type name bind::ct:content.qml
integer animal_count qml fragment
surveychoicessettings

To set the content to a blue rectangle, replace qml fragment above with the following:

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    color: "blue"
    Button {
        anchors.centerIn: parent
        text: "Click me"
        onClicked: parent.color = "red"
    }
}

In the example, the content is blue, then changes to red when the button is clicked.

qmlBase64

Base64 encoded QML (see qml above).

qmlFile

Name of a QML file which exists alongside other project files. This is not supported on ODK or KoBoToolbox, but can be used in Survey123.