How to make the responsive layout

[former_member739563]

Hi experts,
Here I am building the dashboard using CSS Grid and Integration cards, but when I minimize the screen Integration cards are hiding rather than becoming responsive.

<core:FragmentDefinition xmlns:cards="sap.f.cards" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:cssgrid="sap.ui.layout.cssgrid" xmlns:f="sap.f" xmlns:w="sap.ui.integration.widgets" xmlns:card="sap.f.cards" xmlns:l="sap.ui.layout"> <f:GridContainer > <cssgrid:CSSGrid id="grid1" gridAutoFlow="Column" gridTemplateColumns="repeat(4, 14rem)" gridTemplateRows="repeat(2, 9rem)" gridAutoRows="2rem" gridGap="1rem" class="sapUiSmallMargin"> <cssgrid:customLayout> <cssgrid:GridResponsiveLayout layoutChange="onLayoutChange"> <cssgrid:layoutS> <cssgrid:GridSettings gridTemplateColumns="repeat(2, 8rem)" gridAutoRows="2rem" gridRowGap="1rem" gridColumnGap="1rem" gridAutoFlow="Column" gridTemplateRows="repeat(7, 9rem)"> </cssgrid:GridSettings> </cssgrid:layoutS> <cssgrid:layout> <cssgrid:GridSettings gridTemplateColumns="repeat(3, 14rem)" gridTemplateRows="repeat(2, 9rem)" gridAutoRows="2rem" gridRowGap="1rem" gridColumnGap="1rem" gridAutoFlow="Column"> </cssgrid:GridSettings> </cssgrid:layout> <cssgrid:layoutXL> <cssgrid:GridSettings gridTemplateColumns="repeat(auto-fit, 20rem)" gridAutoRows="5rem" gridRowGap="1rem" gridColumnGap="1rem"> </cssgrid:GridSettings> </cssgrid:layoutXL> </cssgrid:GridResponsiveLayout> </cssgrid:customLayout> <VBox class="demoBox"> <Text text="Three" wrapping="true" /> </VBox> <VBox class="demoBox"> <Text text="Five" wrapping="true" /> </VBox> <VBox class="demoBox"> <Text text="Six" wrapping="true" /> </VBox> <VBox class="demoBox"> <Text text="Seven" wrapping="true" /> </VBox> <VBox class="demoBox"> <Text text="Eight" wrapping="true" /> </VBox> <VBox class="demoBox"> <Text text="Nine" wrapping="true" /> </VBox> </cssgrid:CSSGrid> <l:Grid containerQuery="true"> <l:HorizontalLayout> <w:Card manifest="{manifests>/donut}"> <w:layoutData> <l:GridData span="XL6 L6 M6 S6"/> </w:layoutData> </w:Card> <f:Card width="200px" height="300px"> <f:header> <card:Header title="Top 3 Waste codes" /> </f:header> <f:content> <List items="{data>/wasteCodes}" headerText="Waste Code"> <items> <StandardListItem title="{data>name}" /> </items> </List> </f:content> <f:layoutData> <l:GridData span="XL6 L3 M3 S3"/> </f:layoutData> </f:Card> </l:HorizontalLayout> </l:Grid> </f:GridContainer> </core:FragmentDefinition>

[daniel_vladinov · Accepted solution]

Hi, Virendra!

Integration Cards in general are dimension-agnostic.

It is up to wrapping layout container (grid-based, or div-based, whatever) to give them right sizes.

Explore the following samples and check how are CSSGrid and GridContainer configured and/or behave on small screens:

- https://ui5.sap.com/#/entity/sap.ui.layout.cssgrid.CSSGrid/sample/sap.ui.layout.sample.ProductHomeLa...

- https://ui5.sap.com/#/entity/sap.f.GridContainer/sample/sap.f.sample.GridContainer

- https://ui5.sap.com/#/entity/sap.f.GridContainer/sample/sap.f.sample.GridContainersNavigation

Hope this help,

Daniel

[former_member739563 · Accepted solution]

daniel.vladinov Thank you,
I got it now