Mis Allignment in block layout on navigation

[former_member739563]

Hi Expertise,
I am building the Dashboard in ui5 version 1.44 for responsive perspective I am using the block layout, But the issue is occurring that when I make navigation In launchpad the block layout cells are getting misalignment. So please someone suggest me how I can correct it.

[Margot]

Can you provide any further information? How is the code of your app and how is the configuration on FLP for the navigation? How does the miss-alignment look like? Do you get any errors in the console? Best would be some reproduce-able example. Also note that UI5 1.44 is already out of maintenance. So if you just started to build this app you should rather use a more up to date version of UI5.

[former_member739563]

Hi,margot.wollny,
This is code which I have used to build above shown layout

<l:BlockLayout id="BlockLayout" background="Default"> <l:BlockLayoutRow> <l:BlockLayoutCell width="1"> <VBox alignItems="Center" justifyContent="Center" width="300px"> <customData> <core:CustomData key="box-color" value="{ parts: [ {path: 'model>/kpiData/0/KPI_Name'}, {path: 'model>/kpiData/0/KPI_Value'} ], formatter: '.formatter.applyBackground' }" writeToDom="true"></core:CustomData> </customData> <Text text="{model>/kpiData/0/KPI_Name}" wrapping="true"/> <HBox> <Text text="{model>/kpiData/0/KPI_Value}" wrapping="true"/> <Text text="{ parts: [ {path: 'model>/kpiData/0/KPI_Name'} ], formatter: '.formatter.getKPITargetUom'}"/> </HBox> </VBox> <VBox alignItems="Center" justifyContent="Center" width="300px"> <customData> <core:CustomData key="box-color" value="{ parts: [ {path: 'model>/kpiData/1/KPI_Name'}, {path: 'model>/kpiData/1/KPI_Value'} ], formatter: '.formatter.applyBackground' }" writeToDom="true"></core:CustomData> </customData> <Text text="{model>/kpiData/1/KPI_Name}" wrapping="true"/> <HBox> <Text text="{model>/kpiData/1/KPI_Value}" wrapping="true"/> <Text text="{ parts: [ {path: 'model>/kpiData/1/KPI_Name'} ], formatter: '.formatter.getKPITargetUom'}" /> </HBox> </VBox> </l:BlockLayoutCell> <l:BlockLayoutCell width="1"> <VBox alignItems="Center" justifyContent="Center" width="300px"> <customData> <core:CustomData key="box-color" value="{ parts: [ {path: 'model>/kpiData/2/KPI_Name'}, {path: 'model>/kpiData/2/KPI_Value'} ], formatter: '.formatter.applyBackground' }" writeToDom="true"></core:CustomData> </customData> <Text text="{model>/kpiData/2/KPI_Name}" wrapping="true"/> <HBox> <Text text="{model>/kpiData/2/KPI_Value}" wrapping="true"/> <Text text="{ parts: [ {path: 'model>/kpiData/2/KPI_Name'} ], formatter: '.formatter.getKPITargetUom'}" /> </HBox> </VBox> <VBox alignItems="Center" justifyContent="Center" width="300px"> <customData> <core:CustomData key="box-color" value="{ parts: [ {path: 'model>/kpiData/3/KPI_Name'}, {path: 'model>/kpiData/3/KPI_Value'} ], formatter: '.formatter.applyBackground' }" writeToDom="true"></core:CustomData> </customData> <Text text="{model>/kpiData/3/KPI_Name}" wrapping="true"/> <HBox> <Text text="{model>/kpiData/3/KPI_Value}" wrapping="true"/> <!--<Text text="{ parts: [ {path: 'model>/kpiData/3/KPI_Name'} ], formatter: '.formatter.getKPITargetUom'}" />--> <Text text="MIN" /> </HBox> </VBox> </l:BlockLayoutCell> <l:BlockLayoutCell width="1"> <VBox alignItems="Center" justifyContent="Center" width="300px"> <customData> <core:CustomData key="box-color" value="{ parts: [ {path: 'model>/kpiData/4/KPI_Name'}, {path: 'model>/kpiData/4/KPI_Value'} ], formatter: '.formatter.applyBackground' }" writeToDom="true"></core:CustomData> </customData> <Text text="{model>/kpiData/4/KPI_Name}" wrapping="true"/> <HBox> <Text text="{model>/kpiData/4/KPI_Value}" wrapping="true"/> <Text text="{ parts: [ {path: 'model>/kpiData/4/KPI_Name'} ], formatter: '.formatter.getKPITargetUom'}"/> </HBox> </VBox> <VBox alignItems="Center" justifyContent="Center" width="300px"> <customData> <core:CustomData key="box-color" value="{ parts: [ {path: 'model>/kpiData/5/KPI_Name'}, {path: 'model>/kpiData/5/KPI_Value'} ], formatter: '.formatter.applyBackground' }" writeToDom="true"></core:CustomData> </customData> <Text text="{model>/kpiData/5/KPI_Name}" wrapping="true"/> <HBox> <Text text="{model>/kpiData/5/KPI_Value}" wrapping="true"/> <Text text="{ parts: [ {path: 'model>/kpiData/5/KPI_Name'} ], formatter: '.formatter.getKPITargetUom'}"/> </HBox> </VBox> </l:BlockLayoutCell> </l:BlockLayoutRow> <l:BlockLayoutRow> <l:BlockLayoutCell width="2"> <Panel width="100%" height="auto"> <OverflowToolbar> <Label text="Top 5 Shop Frequency" design="Bold"/> </OverflowToolbar> <viz:Popover id="idPopOver1"></viz:Popover> <viz:VizFrame id="idVizFrame1" uiConfig="{applicationSet:'fiori'}" height='260px' width="100%" vizType='column' legendVisible="false"> <viz:dataset> <viz.data:FlattenedDataset data="{model1>/kpiDataFrequency}"> <viz.data:dimensions> <viz.data:DimensionDefinition name="Reason" value="{model1>REASON}"/> </viz.data:dimensions> <viz.data:measures> <viz.data:MeasureDefinition name="Reason" value="{model1>REASON}"/> <viz.data:MeasureDefinition name="Frequency (count)" value="{model1>FREQUENCY}"/> </viz.data:measures> </viz.data:FlattenedDataset> </viz:dataset> <viz:feeds> <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Frequency (count)"/> <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Reason"/> </viz:feeds> </viz:VizFrame> </Panel> </l:BlockLayoutCell> <l:BlockLayoutCell width="2"> <Panel width="95%"> <OverflowToolbar> <Label text="Top 5 Availability Loss" design="Bold"/> </OverflowToolbar> <!--<viz:VizFrame xmlns="sap.viz" id="idcolumn2" width="100%"/>--> <viz:Popover id="idPopOver2"></viz:Popover> <viz:VizFrame id="idVizFrame2" uiConfig="{applicationSet:'fiori'}" height='260px' width="95%" vizType='column' legendVisible="false"> <viz:dataset> <viz.data:FlattenedDataset data="{model1>/kpiDataDurationTotal}"> <viz.data:dimensions> <viz.data:DimensionDefinition name="Reason" value="{model1>REASON}"/> </viz.data:dimensions> <viz.data:measures> <viz.data:MeasureDefinition name="Reason" value="{model1>REASON}"/> <viz.data:MeasureDefinition name="Duration (in Min)" value="{model1>DURATION_TOTAL}"/> </viz.data:measures> </viz.data:FlattenedDataset> </viz:dataset> <viz:feeds> <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Duration (in Min)"/> <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Reason"/> </viz:feeds> </viz:VizFrame> </Panel> </l:BlockLayoutCell> <l:BlockLayoutCell width="1"> <Panel height="302px" width="100%"> <OverflowToolbar> <Label text="Top 3 defects codes" design="Bold"/> </OverflowToolbar> <List items="{data>/defectsCodes}"> <items> <StandardListItem title="{data>name}"/> </items> </List> </Panel> </l:BlockLayoutCell> </l:BlockLayoutRow>

[Margot]

At a first glance this code seems to be ok, so the issue must be somewhere else in your code or FLP settings. But without further details, no idea where to start digging ...