Center Container

Overview

The Center Container allows its content vertically and horizontally in a Servoy Responsive Form.

You can drop Servoy Web Components and nest other 12Grid containers into its content section. You can also nest center container within each other.

To center the content vertically the parent container must have a known height; if the height of it's parent container is not known the container will center it's content only horizontally.

Note that 12Grid rows and columns usually don't have a known height (unless their height is set in the styleSheet), therefore the center container contained in a 12Grid column will center its content vertically.

Getting Started

Create a Center Container

These are the steps for creating a Center Container :

Open the Form Editor of your responsive form
Find Center Container in Templates subsection of the Bootstrap 12-Grid section in the components' pallet
Drag and drop the Center Container component in:
- empty space of the form, as an independent component
- inside any other container components, except Container, Row
Add other needed components inside the Center Container, except for Container, Column or Flex Item

Center multiple elements

You can drop Servoy Web Components and nest other 12Grid containers into its content section to center multiple elements as a single block. You can also nest multiple center containers to center sub-content within the content section; note that as for the 12Grid rows, sub-content of the center container are centered only horizontally by default (unless you define a known height or min-height to the sub center container via CSS); this is the case since the content of the top-level center container doesn't have a known height but it is 'auto' calculated depending on its content.

Width and Height of the center content

The center content section doesn't have a known height and width but its height and width are set to 'auto'; this means that the content section will grow as much it needs (depending on its content) and not more.

Since the content section height and width are auto, a container or a web component which has width or height equal to 100%, will also fallback into width and height equal to auto. For example a textbox component having a form-control class, which usually takes 100% of the width, won't grow to the whole available width instead will use its default width (which has different value depending on browser version and OS system).

Min Width

You can set a min-width to the content section (using CSS classes) to stretch its content to a minimum dimension; inner containers and components having width equal to 100% will grow up to at least the min-width of the content section.