Mashup Builder > Mashups > Mashup Types > Responsive (Advanced) Mashups
  
Responsive (Advanced) Mashups
The Responsive (Advanced) mashup allows you to arrange items within a container using advanced Flexbox-based containers.
* 
To use the advanced responsive layout features with an existing mashup, you must rebuild your mashup.
Using Flexbox-based containers, you can perform the following:
Align items vertically or horizontally in a container.
Stretch or wrap items in a container, depending on the available space.
Set fixed container height or width.
Control container growth and shrink options if your mashup contains more than one container.
Use custom Cascading Styling Sheets (CSS) rules to position items.
You can use containers as rows and columns to structure your mashups. Items in a container flex or shrink, depending on the available space. In Mashup Builder, you can use the Layout tab to control options such as orientation, alignment, stretch, and wrap for items in a container. You can define specific layout rules for each container in your mashup.
Creating a Responsive (Advanced) Mashup
1. From Composer, click New > New Mashup. The New Mashup window opens.
2. Select Responsive (Advanced), and then click OK.
3. Enter a name for the mashup, and then click Save.
Adding Containers to a Mashup
By default, blank Responsive (Advanced) mashups have one container. To add more containers to a mashup, do the following:
1. In the Mashup Builder, click Layout.
2. Select a container on the mashup.
3. On the Layout tab, under the Add Container section, select an option to add a container to the left, right, top of, or below the selected container.
4. Repeat steps 2 and 3 to add containers to the mashup.
5. Click Save.
Adding Items to a Container
After you created the Mashup layout, you can start adding items to the container. Items are sorted in the order in which they are added.
To add an item, drag the item on any container in your mashup.
Arranging Items in a Container
You can control the direction of items in a container.
For each container in your mashup, you can specify the following options:
Orientation—Sets a Vertical or a Horizontal direction for items in the container.
Align and Stretch—Specifies the position and size of items in the container.
Horizontal
Position items horizontally within the container at the following locations:
—At the top.
—In the middle.
—At the bottom.
—Stretches the items to fill the container.
Vertical
Position items vertically within the container at the following locations:
—Left.
—Middle.
—Right.
—Stretches the items to fill the container.
Justify and Distribute—Specifies the position and spacing of items relative to margins in the container.
Horizontal
Position items horizontally within container, relative to margins, at the following locations:
—Left.
—Middle.
—Right.
—With equal space between each item.
—At the margins with equal space between each item.
—With equal space before, after, and between each item.
Vertical
Position items vertically within the container, relative to margins, at the following locations:
—Top.
—Middle.
—Bottom.
—With equal space between each item.
—At the margins with equal space between each item.
—With equal space before, after, and between each item.
Wrap items
Wrapping Items in a Container
Limited container space can cause your mashup layout to break if items overflow the container. Horizontal or vertical scroll bars appear, depending on the direction of items in your container. Use Wrap items to fit into new rows or columns, until there is no space left in the container. You can specify how to wrap lines horizontally and vertically from within the container as follows:
Horizontal
—From the start.
—In the middle of the container.
—At the end of the container.
—Evenly From the start to the end.
—With equal space before and after each line.
Vertical
—At the start.
—In the middle.
—From the end of the container.
—Evenly from the start of the container to the end of the container.
—With equal space before and after each line.
For example, the horizontal space in the following container is less than the width required to display all four of the unwrapped items. The Label widget overflows the available container width, and a scroll bar appears. Wrap items in the container to move the items to a new line when empty space is available.
In the following container, the items are wrapped in the middle of the container:
Nested Containers
If your mashup contains more than one container, you can set how each container responds. Use the following options to specify settings for a selected container:
Grow container—Container grows in the responsive layout.
Shrink container—Container shrinks in the responsive layout.
Flex Width or Flex Height—Specifies a fixed width or height for the container in pixels.