Skip to main content

Customizing Paddings inside items in Table Settings

A walkthrough on how you can customize the paddings for both 'Unselected' and 'Selected' item states in various table types.

L
Written by Leanid Yuryeu
Updated this week

Contents:

Accessing Table Customization:

Screen Added on flow

Click on the screen you've added to the onboarding flow.

Press the Pencil button to enter the "Edit Screen" mode.

Customizing a Specific Screen in the Theme:

For New Onboarding: After selecting a theme, customize the screen by clicking on the Edit button.

For Existing Onboarding: Click on the Settings icon in the upper right corner of the onboarding flow.

Then edit the screen for the entire theme.


​

Implementation on iOS SDK and Web2App

Unselected Item Padding: Customizes the space between item borders and the content inside each item (text, image, checkbox) before user interaction.

Applicable for Both iOS and Web2App.

Note for iOS SDK: Settings apply to the 'Selected' state as well, meaning items in both states cannot have different indents.

Selected Item Padding: Customizes the space between item borders and the content inside each item when a user selects it.

Applicable for Web2App only and allows for different indents in 'Unselected' and 'Selected' states.

Common Padding Settings for Both States

Padding Left: Adjusts the space between the left border of the item and the nearest content (image, text, or checkbox).

Padding Right: Modifies the space between the right border of the item and the nearest content.

Padding Top: Alters the space between the top border of the item and the nearest content.

Padding Bottom: Adjusts the space between the bottom border of the item and the nearest content.

Different Table Types and Their Customization Options

Table Single Selection: On this table type, only the 'Unselected' state is visible in iOS SDK and Web2App. Hence, padding customizations apply only to this state.

Table Multiple Selection and Image Title Subtitle Selection: These table types allow customization for both 'Unselected' and 'Selected' states, enabling dynamic visual feedback based on user selections.

Image Title Subtitle List: This screen type lacks a 'Selected State'. Therefore, its setting is referred to as 'Item Paddings'. The customization options are uniform, as there is no distinction between selected and unselected states.

Consistency in Padding Customizations

  • Adjustments to paddings are applied uniformly across all items in the table.

  • When new items are added, they inherit these padding settings, ensuring a consistent appearance and user experience throughout the table.

Did this answer your question?