Skip to Content
0
Jul 29, 2016 at 02:27 PM

Alignment issues with Grid and FlexBox

258 Views

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>

Attachments

capture.PNG (7.0 kB)
capture.PNG (8.0 kB)