Container

The Container block is the cornerstone of all applications built on our No Code Platform for creating Telegram Mini Apps. It serves as the primary building block for structuring and organizing your app's content. By grouping and aligning other blocks within a Container, you can create complex and responsive layouts that enhance user experience.

Content

• Inner blocks alignment

• Horizontal alignment and distribution

• Vertical alignment and distribution

  • How to align vertical placed blocks by the center?

• Fixation on the screen

• Navigation (links or pages)

• Image cover

• Blur

• Full screen sizing

Inner blocks alignment

You can align inner blocks vertically or horizontally:

Horizontal alignment and distribution

When you align blocks horizontally, inner blocks are placed from the left to the right each after each:

Horizontal alignment of inner blocks of the container

The structure of the following blocks

In this case, you can distribute blocks (to the left, in the center, between the container, etc.):

Move to center

Move to the left

Place blocks between the container

Place block around the container

Moreover, if inner blocks are different in size, you can move them between top and bottom corner of the container:

Center

Top

Bottom

Vertical alignment and distribution

When blocks are aligned vertically, they are placed from the top to the bottom by the left side:

How to align vertical placed blocks by the center?

To align vertically aligned blocks by the center, you need to add inner blocks and place blocks into them with the following structure:

In this case, blocks will be displayed like here:

Navigation (links and pages)

You can attach any link to the container:

Or you can insert the link to another page to navigate between pages.

Fixation on the screen

The container can be fixed to the top or bottom side of the screen. This is needed to achieve “floating” effect for toolbar or bottom menu:

To make the container floating, select isFixed:

Image cover

You can upload an image to the background of your container:

Also, you need to select an image placement when the image is too big:

Keep in mind that containers do not have the own "size". Therefore, other blocks needs to be placed in the container. In the example we have an empty transparent block in the container:

Blur

Containers can be blurred:

Blur is used for floating components to make them more visible under other blocks:

Full screen sizing

You can make the height of the container to fix 100% of the screen:

If inner blocks take more space that the screen height, the height of the container will be increased.

---

Something unclear in docs or you know how to improve article? Message us in community! We will answer you and then promise to improve the article within 3 days.