Columns

The Columns component in Joget is a flexible layout tool that allows users to create responsive designs by customizing column widths for different devices (Laptop/PC, Tablet, Mobile). Each column can be styled independently, and the component supports event listening for enhanced interactivity.

How does it work?

Test the Columns in the built-in Joget DX 8 Showcase app to see how it works.

1. Login as Admin and Click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
   
2. Click the Joget DX 8 Showcase UI to create an environment for testing the Columns.
   
3. Select an UI element into any category you like. For example, Information Tiles.
4. Click Edit Page Components.
5. 
6. Drag and drop the Columns component from the component palette onto your page. Adjust the number and width of columns as needed.
7. Customize each column's properties, such as width, style, and content alignment. You can set different widths for various devices to ensure responsiveness.
   
8. Click Preview to see how your columns appear across different devices. Make adjustments as necessary to optimize the layout.

By using the Columns component, you can enhance your page design with flexible and responsive layouts that improve user interaction and readability.

Configure columns

To configure the Columns component properties, in UI Builder, drag and drop the Rich Text UI element into any category to enable the button Edit Page Components, click on it, and Drag and drop the Columns page component into the page for editing.

When adding the Columns component, you will see the following fields available for configuration:

• ID: Custom ID assigned to the columns for unique identification.
• Column Width: Defines the width of the column for Laptop/PC view.
• Column Width (Tablet): Defines the column width for Tablet view.
• Column Width (Mobile): Defines the column width for Mobile view.
• Add: Add more columns to the layout.
• Stacks Columns In Mobile View: When checked, columns will stack vertically in Mobile View.
• Gutter: The padding between columns provides space for a better layout structure.

AJAX & events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.