sapui5
How to make simple form responsive?
I have made a simple form which is defined below:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange480_12120"
editable="true"
layout="ResponsiveGridLayout"
title="Add New Employee"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsL="1"
columnsM="1"
columnsS="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Employee Id">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empid">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Employee Name">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empname">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="email">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="department">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="City">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="city">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="State">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="state" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="District">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="district" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Address">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="address" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
</VBox>
</core:FragmentDefinition>
I guess I am doing any mistake in defining the span. I don't have much idea on large, medium and small systems I think the main problem I am facing is in that issue.
When I am checking the responsive in iPad device it's not showing exact responsive, but I have tried in this way can anyone help me to make it as responsive.
Solution
As per your requirement(iPad), the form was not showing 3 columns. You need to adjust the span values.
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange480_12120"
editable="true"
layout="ResponsiveGridLayout"
title="Add New Employee"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsL="1"
columnsM="1"
columnsS="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Employee Id">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empid">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Employee Name">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empname">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="City">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="city">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="State">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="state" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="District">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="district" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Address">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="address" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<!-- Select -->
<Label text="Branch">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Select>
<layoutData>
<l:GridData span="L2 M2 S12" />
</layoutData>
</Select>
</f:content>
</f:SimpleForm>
</VBox>
Output - iPad with label span 2 and input span 3
Output - iPad with label and input span 2
- SAPUI5: FileUploader Not Working
- How to bind this using fomatter from the controller?
- How to import ES Module into UI5 controller
- Separate homeicons for android and ios using sap.m.Shell
- Methods assigned in XML fragment not triggered
- SAPUI5 Fragment won't open
- UI5 - DateTimePicker - minDate can be undershot and overwritten at the same time
- How to avoid loading UI5 controls as single modules?
- Custom Card Component with individual Controllers in SAPUI5 Application
- How to Trace JavaScript Dynamically Created Elements to Their Origins in Code?
- sap.ui.comp.smarttable.SmartTable shows wrong row counts when we use growing on
- How to remove multi-origin composition
- How do i change the parent side iframe to the entire height of the SAPUI5 child side?
- How to Fix "String as JavaScript" Errors in FLP? (Async Module Loading)
- Are security concerns sending a password using a GET request over https valid?
- How to avoid "Synchronous XMLHttpRequest on the main thread" warning in UI5?
- `this` is not the controller in an event handler assigned from JSView
- Binding Item data to the Detail View
- Empty Space in Page Without Throwing Any Errors
- Why changes from BAS are not reflected in Fiori launchpad?
- SAP RAP Fiori Elements app does not trigger Events of Fragment
- How to set focus on the search field when it is displayed?
- Operation_Start method is not being triggered
- Why changes made in Controller.js are not reflected w/o changin Component-Preload.js?
- GET_STREAM Method to download an attachment file didn't triggered from SAPUI5 Controller
- How to deploy UI5 app to ABAP Repository in SAP BAS?
- WebIDE: How to Create Shell Plugin for Fiori Launchpad?
- Extending SAP Fiori App - Adding button in the footer
- How To Allow Additional Binding Syntax?
- Why Is My Main Controller Being Called Twice?