Page History

...

The designStyleClass

The designStyleClass property is used to express how the layout container is displayed in the Exploded view. The Exploded view makes the structure of layout containers more visible in the designer.

In the image below we have 3 rows: the first one is empty, the second one contains one column and the third contains 3 columns.

Image Added

Let's take for instance the 12 grid Row layout container.

{
	"name": "row",
	"displayName": "Row",
	"icon": "12grid/row.png",
	"designStyleClass" : "rowDesign",
	...
}

Therefore, when a responsive form is open in the Form editor and the Exploded view button is pressed, all rows have the rowDesign styleclass because we have specified it as the designStyleClass for layout containers of type 12 grid row.

Manifest-Version: 1.0
Ant-Version: Apache Ant 1.8.4
CSS-ClientLibs: 12grid/lib/12grid.css
Responsive-Layout: True
Bundle-SymbolicName: 12grid
Bundle-Name: Bootstrap 12-Grid
Bundle-Version: 1.4.1
CSS-DesignLibs: 12grid/lib/12grid_design.css
...

To make the 12 grid row display like this in the Exploded View,

we need to add the following css rules to the 12grid_design.css:

/* Please note that the margin and padding are marked as important to avoid the exploded view style to be overruled by any css defined in the solution. */
.rowDesign {
    background-color : #D3D3D3;
    border : 2px solid inherit;
    margin : 30px 10px !important; 
    min-height : 40px;
    padding : 10px !important;
}