How To
Summary
In the old grid layout, you had the horizontal and vertical span attributes, which are missing from the BSGridlayout. How is it achieved by using Bootstrap widget?
Objective
Steps
These properties are not applied for BSGridLayout as there are not such concepts anymore. The BSGridLayout is row-and-cell-based layout. There is no column-wise property so colSpan is not supported directly. A nested layout is needed to do a colSpan.
For rowSpan, we use colWidth property to achieve the same feature. The BSGridLayout follows the 12-column grid design of Bootstrap. Each row is split into 12 columns, thus the width can be presented by how many virtual columns it takes. For example, the value 3 indicates 3 columns that are 1/4th of the total width. If the row width gets larger, the column is also enlarged proportionally to adapt to different screen sizes. So in this case, if the user have 2 columns and wants to have column 2 to be rowSpan 2 (col1 width to be 1/3 and col2 to be 2/3), which can be done by setting the col2 colWidth to 8 which is 2/3 of 12.
forgotUid HTML{text = "<a href>Forgot userid<a>", class::=" text-right", layoutData = new BSGridLayoutData{row = 1,column = 2,
colWidth= new BSGridLayoutColWidth{default=8
The user can set different width for different screen size for colWidth. For more detail, please check
https://www.ibm.com/support/pa
Document Location
Worldwide
Was this topic helpful?
Document Information
Modified date:
23 February 2020
UID
ibm13355179