Hi
I am trying to create a screen with few buttons and a table below with sap.m library(to be used on desktop and mobile both) - Need responsive layout. Here I am facing alignment issues with grid and flex box.If the button content is more they should come in second row.
View in Mobile:
View in Desktop
Here is my code:
<l:Grid
class="sapUiSmallMarginTop"
hSpacing="1"
defaultSpan="L12 M8 S6">
<l:content>
<FlexBox alignItems="Start">
<items>
<Label text="Series:" ></Label>
<Select id="__box1" >
<core:Item key="1" text="ABCD" />
<core:Item key="2" text="EFGH" />
</Select>
</items>
</FlexBox>
</l:content>
</l:Grid>
<l:Grid class="sapUiSmallMarginTop"
hSpacing="1"
defaultSpan="L10 M8 S4">
<FlexBox alignItems="Start">
<items>
<Button text="New"
press="new"></Button>
<Button text="Edit" press="edit"></Button>
<Button text="Validate" press="validate"></Button>
<Button text="Save" press="save"></Button>
<Button text="Delete" press="delete"></Button>
<Button text="Refresh" press="refresh"></Button>
<Button text =" Export"
press="exportToExcel"></Button>
</items>
</FlexBox>
</l:Grid>