Inline Group Container
Overview
The Inline Group Container allow syou to use at best the available width dividing the available width in 3 horizontal section, left, right and content; the left and the right section will use all and only the necessary width depending on their content (if any); the content section instead will use all the remaining width.
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252Fgit-blob-2f77307b2e13b3053a671930167bed84d15a6279%252F2017-10-19_1853.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=94c1cfe0&sv=1)
Getting Started
You can drop Servoy any Servoy Web Components and nest other 12Grid containers into the left, right and content section.
You may decide to leave empty the right or left section, not necessarily you need to use these section; however you may use at least one of these 2 sections; otherwise you may not use this container at all since there is no benefit on using only the content section.
IMPORTANT! The parent container of the inline group container MUST have a known width, the inline group container is not useful at all if the width of its top container is auto
(which is an unknown value).
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252Fgit-blob-71c409337452272bf771f06137626ce6e5652125%252F2017-10-19_1852.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=a834574a&sv=1)
Create an Inline Group Container
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252Fgit-blob-bee81c789d46f84a9d28addcb325545a2a7d7571%252Fcenter-container.gif%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=e0822cbd&sv=1)
These are the steps for creating an Inline Group Container :
Open the Form Editor of your responsive form
Find Inline Group Container in Templates subsection of the Bootstrap 12-Grid section in the components' pallet
Fixed Left/Right Section Size
You may force the left and or right section to a fixed width by setting the respectively the data-leftsize
and data-rightsize
attribute of the inline group container to one of the pre-defined values xs
, sm
, md
, lg
.
Setting a fixed size to a section is particularly useful when you want to align multiple label and fields using multiple inline group containers.
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252Fgit-blob-ad3c449c7b83b65671c6cfb38425b629c87006bd%252F2017-10-19_1921.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=31cbf9b8&sv=1)
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252Fgit-blob-65cfac3e53945b2e0da818ce02f54fa9801138db%252F2017-10-19_1922.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=53bd68a7&sv=1)
You can override the default sizes of the pre-defined values by adding the following CSS rules to the CSS styleSheet of your Solution.
You can of course decide also to add your own CSS class to set a specific width to the section instead of using the pre-defined sizes.
Responsive Section
You can enable a responsive behavior for the left section using the attribute data-responsive
of the inline-group-container. You can select a breakpoint value (sm
, md
, lg
) for which the left section will move into a new line when the screen size is smaller than the breakpoint value; see the Bootstrap CSS Media Query for the breakpoint values.
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252Fgit-blob-c8945e593fdc7836744c284f5be1c9f2db29f30e%252F2017-10-19_1903.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=fa6ad8c1&sv=1)
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252Fgit-blob-7b9ab35b47685f50bc7f21cf2cd9f004903e6246%252F2017-10-19_1901.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=f9ba9238&sv=1)
Nesting Inline Group Containers
You can nest multiple inline group container within the content section to sub-divide the available width of the content section.
Last updated