HTML Comment |
---|
|
Iframe |
---|
src | https://www.youtube.com/embed/ |
---|
|
|
nyfM3hQq7gg560px315px | Tip |
---|
Remember that with auto size set: A single, empty area component in a dashboard will automatically fill all the visible dashboard space, even though it is empty. A component does not expand to accommodate all its content. It expands to fit the available space. If there are more fields than can be displayed in a component you can: - Either add scroll bars to the component. In Style Settings, select Show Horizontal Scroll Bar or Show Vertical Scroll Bar.
- Or allow the parent component to expand by unticking Auto Size in the parent. This allows the child objects to push the container to expand to fit the content. You must then add scroll bars to the parent component.
|
Position
Position settings can be:
- absolute, when you want to configure a specific location for a component within its parent. This can be useful where you want a component to always appear in the same place. For example, you may want the company logo to always appear in the top left of every screen. However, setting an absolute position prevents the component from flowing with other things on the screen.
- relative, when you want to position the component relative to siblings. This allows items to flow or flex. Use relative positioning if you want your application layout to be responsive to different screen sizes.
Iframe |
---|
src | https://www.youtube.com/embed/ |
---|
|
|
hDbSVkHpxEM560px | height | 315px |
---|
Absolute or Fixed Position
To specify a component is always positioned in the top left corner of its parent area, set Position Settings → Top: 0 and Left: 0.
If you have a fixed layout component combined with components that have relative positioning, be aware that:
- the fixed component's size depends on its Position Settings → Width and Height. If no value is set it will have the default minimum size.
- other components will flow over the top of a fixed component.
To change which component is in front/behind, add a CSS Properties and set:- CSS Tag:
z-index
- Value to be greater than 1.
2 is sufficient to bring a component to the front. However, if you use a larger increment, for example 10, you have the flexibility of adding more layers if they are needed.
Relative Position
By setting the properties on a parent area, you can determine how the child objects are positioned relative to each other.
To configure how components align, use Style Settings
- Direction:
- Row puts components next to each other horizontally.
- Column puts components below each other vertically.
- Wrap: Wrap - allows components to start a new row or column when all space is filled. This also means when the screen size changes, the components will flow onto additional rows, rather than disappearing off-screen.
Additional style settings affect the child objects. The following settings provide very responsive design.
- Wrap: Wrap - allows components to start a new row or column when all space is filled. This also means when the screen size changes, the components will flow onto additional rows, rather than disappearing off-screen.
- Justify: Flex Start - tells the first component to be in the top left
- Align: Stretch - tells each component to stretch to fit the available space. If all components fit on one row, then the components extend to fill the vertical space. If components have to wrap to form a second row, each row will occupy half the vertical space.
There is a Theme 2 demonstration dashboard that you can use to see how this works. In the repository Packages section navigate to Theme2 - App Builder. Right-click T2 - Example Dashboard. and select Display. When you resize the screen, you can see that the different areas move to remain visible in the smaller window.
Note |
---|
When you change a layout component from flowing within its parent to having a fixed position, depending on other settings: - it's size may change
- it may be behind or in front of another component.
|
Combining Settings for Responsive Applications
When you combine Auto Size with Style Settings, you can achieve a responsive "flexbox" design.
When you set Auto Size and a Direction, PhixFlow provides additional Style Settings for Wrap, Justify and Align. The Align: Stretch option is useful to expand components into the available space perpendicular to the flow direction. For example, in a row, components stretch to fill the vertical space. In a column, they stretch to fill the horizontal space.
Iframe |
---|
src | https://www.youtube.com/embed/WF2_UxWZ6Rg?rel=0 |
---|
width |
---|
|
|
560px315px