Columns

The Columns widget displays up to 2 columns in a card message or dialog. You can add widgets to each column; the widgets appear in the order that they are specified. For an example in Google Chat apps, see Columns.

The height of each column is determined by the taller column. For example, if the first column is taller than the second column, both columns have the height of the first column. Because each column can contain a different number of widgets, you can't define rows or align widgets between the columns.

Columns are displayed side-by-side. You can customize the width of each column using the HorizontalSizeStyle field. If the user's screen width is too narrow, the second column wraps below the first:

On web, the second column wraps if the screen width is less than or equal to 480 pixels.
On iOS devices, the second column wraps if the screen width is less than or equal to 300 pt.
On Android devices, the second column wraps if the screen width is less than or equal to 320 dp.

To include more than 2 columns, or to use rows, use the Grid widget.

Supported by Chat apps, but not Google Workspace Add-ons.

Example: a card with two columns of text

The following displays a card with a Columns widget that features 2 columns of text. To view only the columns layout and to collapse the code sample, click Collapse. When space is constrained, like in the following example, the second column wraps below the first column.

JSON representation and fields

JSON representation
{ "columnItems": [ { object (`Column`) } ] }

Fields

Fields
`columnItems[]`	`object (Column)` An array of columns. You can include up to 2 columns in a card or dialog.

columnItems[]

object (Column)

An array of columns. You can include up to 2 columns in a card or dialog.

Column

A column.

JSON representation
{ "horizontalSizeStyle": enum (`HorizontalSizeStyle`), "horizontalAlignment": enum (`HorizontalAlignment`), "verticalAlignment": enum (`VerticalAlignment`), "widgets": [ { object (`Widgets`) } ] }

Fields
`horizontalSizeStyle`	`enum (HorizontalSizeStyle)` Specifies how a column fills the width of the card.
`horizontalAlignment`	`enum (HorizontalAlignment)` Specifies whether widgets align to the left, right, or center of a column.
`verticalAlignment`	`enum (VerticalAlignment)` Specifies whether widgets align to the top, bottom, or center of a column.
`widgets[]`	`object (Widgets)` An array of widgets included in a column. Widgets appear in the order that they are specified.

HorizontalSizeStyle

Specifies how a column fills the width of the card. The width of each column depends on both the HorizontalSizeStyle and the width of the widgets within the column.

Enums
`HORIZONTAL_SIZE_STYLE_UNSPECIFIED`	Don't use. Unspecified.
`FILL_AVAILABLE_SPACE`	Default value. Column fills the available space, up to 70% of the card's width. If both columns are set to `FILL_AVAILABLE_SPACE`, each column fills 50% of the space.
`FILL_MINIMUM_SPACE`	Column fills the least amount of space possible and no more than 30% of the card's width.

HorizontalAlignment

Specifies whether widgets align to the left, right, or center of a column.

Enums
`HORIZONTAL_ALIGNMENT_UNSPECIFIED`	Don't use. Unspecified.
`START`	Default value. Aligns widgets to the start position of the column. For left-to-right layouts, aligns to the left. For right-to-left layouts, aligns to the right.
`CENTER`	Aligns widgets to the center of the column.
`END`	Aligns widgets to the end position of the column. For left-to-right layouts, aligns widgets to the right. For right-to-left layouts, aligns widgets to the left.

VerticalAlignment

Specifies whether widgets align to the top, bottom, or center of a column.

Enums
`VERTICAL_ALIGNMENT_UNSPECIFIED`	Don't use. Unspecified.
`CENTER`	Default value. Aligns widgets to the center of a column.
`TOP`	Aligns widgets to the top of a column.
`BOTTOM`	Aligns widgets to the bottom of a column.

Widgets

The supported widgets that you can include in a column.

JSON representation

JSON representation
{ // Union field `data` can be only one of the following: "textParagraph": { object (`TextParagraph`) }, "image": { object (`Image`) }, "decoratedText": { object (`DecoratedText`) }, "buttonList": { object (`ButtonList`) }, "textInput": { object (`TextInput`) }, "selectionInput": { object (`SelectionInput`) }, "dateTimePicker": { object (`DateTimePicker`) } // End of list of possible types for union field `data`. }

{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  }
  // End of list of possible types for union field data.
}

Fields
Union field `data`. `data` can be only one of the following:
`textParagraph`	`object (TextParagraph)` `TextParagraph` widget.
`image`	`object (Image)` `Image` widget.
`decoratedText`	`object (DecoratedText)` `DecoratedText` widget.
`buttonList`	`object (ButtonList)` `ButtonList` widget.
`textInput`	`object (TextInput)` `TextInput` widget.
`selectionInput`	`object (SelectionInput)` `SelectionInput` widget.
`dateTimePicker`	`object (DateTimePicker)` `DateTimePicker` widget.

Troubleshoot

When a Google Chat app or card returns an error, the Chat interface surfaces a message saying "Something went wrong." or "Unable to process your request." Sometimes the Chat UI doesn't display any error message, but the Chat app or card produces an unexpected result; for example, a card message might not appear.

Although an error message might not display in the Chat UI, descriptive error messages and log data are available to help you fix errors when error logging for Chat apps is turned on. For help viewing, debugging, and fixing errors, see Troubleshoot and fix Google Chat errors.