Element Details: Responsive+Row
 Back


Available in: Logi Info Source code name: ResponsiveRowIntroduced in: v11.4.046

ResponsiveRow helps implement an optimal view experience for different size devices.

ResponsiveRow sets up a 12-column fluid grid system. Add Child ResponsiveColumn elements which will align to the grid. As the browser screen (viewport) changes width, the column widths change fluidly. And column content will be wrapped below when the viewport is narrow.

Run this sample and resize the browser window to see how the column contents wrap.

<ResponsiveRow>
<ResponsiveColumn ColspanSmallScreen="6" ColspanExtraSmallScreen="12" ColspanMediumScreen="4" ColspanLargeScreen="3">
<Label Caption="hello1" />
</ResponsiveColumn>
<ResponsiveColumn ColspanSmallScreen="6" ColspanExtraSmallScreen="12" ColspanMediumScreen="4" ColspanLargeScreen="3">
<Label Caption="hello2" />
</ResponsiveColumn>
<ResponsiveColumn ColspanSmallScreen="6" ColspanExtraSmallScreen="12" ColspanMediumScreen="4" ColspanLargeScreen="3">
<Label Caption="hello3" />
</ResponsiveColumn>
<ResponsiveColumn ColspanSmallScreen="6" ColspanExtraSmallScreen="12" ColspanMediumScreen="4" ColspanLargeScreen="3">
<Label Caption="hello4" />
</ResponsiveColumn>
</ResponsiveRow>



ATTRIBUTES

Click attribute Name to drill down for more information.

NamePossible ValuesDescription
Class
UserDefined
Sets the Cascading Style Sheet class used by the element. When set, this class will also be used by all child elements that don't have their own class. The class should be defined in the report's style sheet file.
CollisionBehavior
Wrap
Overlap
HorizontalScrollbar
ResponsiveRow content works best when it dynamically shrinks and grows to fit the column width. Normally, the designer of the report should give ResponsiveColumns enough width so the content fits. Yet sometimes content still cannot get small enough to fit. For example, a table can only get so small. Or an image may have a fixed width. CollisionBehavior determines how to handle cases when ResponsiveColumns collide because content cannot shrink. "HorizontalScrollbar" shows a scroll-bar, some of the content gets hidden. "Wrap" moves the ResonsiveColumn down to the next row. "Overlap" make the contents overlap each other. The default is "HorizontalScrollbar".
ID
UserDefined
The ID attribute is a pervasive attribute that uniquely identifies an element within a definition file. The ID needs to be a unique value within the definition.
SecurityRightID
UserDefined
When entered, access to this element can be controlled with Logi security. Supply the ID of a right defined in the applications settings’ Security element. Only users that have a right in the SecurityRightID will be able to see the element. Note that when rights come from RightFromRole elements under Security/UserRights, and this element's SecurityRightID does NOT match any of the Right IDs defined in the Settings definition, then the user DOES have access. But when Right IDs are instead derived from RightsFromDataLayer or RightsFromRoles elements, and the user DOES NOT have a matching Right, then the user DOES NOT have access. You can enter multiple right IDs, separated by commas. In this case, the user sees the element if he has any one of the Rights.



PARENT ELEMENTS

Click element to drill down for more information.

Body
Column Cell
Crosstab Table Value Columns
Data Calendar Rows
Data Multi-Column List
Data Table Column
Data Tree Branch
Division
Fieldset Box
HTML Tag
List Item
Map Marker Info
More Info Row
More Info Row Column
Page Footer
Page Header
Panel Parameters
Popup Panel
Rectangle
Report Footer
Report Header
Responsive Column
Tab Panel
Tooltip Panel


CHILD ELEMENTS

Click element to drill down for more information.

Responsive Column


 Back to top


 Chart Debug