Skip to Content

Align center SAPUI5

How can I Align the elements in the center of page?

Bellow is the code and an image about of my view.xml

<mvc:View
	height="100%" 
	controllerName="sap.m.sample.InputStates.C"
	xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" 
xmlns:m="sap.m" 
xmlns:c="sap.ui.core" 
xmlns="sap.ui.comp.variants">
<l:Grid defaultSpan="L12 M7 S12" width="auto">
		<l:content>
			<f:SimpleForm id="SimpleFormChange354" minWidth="1024" maxContainerCols="2" layout="ResponsiveLayout" editable="true" visible="true">
				<f:content>
					<m:Label text="Login de"  labelFor="multiInput"/>
					<m:MultiInput id="multiInput" valueHelpRequest="valueHelpRequest"  required="true" width="40%"/>
				
					<m:Label text="Para"/>
					<m:MultiInput id="loginPara" valueHelpRequest="valueHelpRequest" required="true" width="40%"/>
				
					<m:Label text="Data de"/>
					<m:DatePicker dateValue="" placeholder="Insira a data" id="datade" required="true" width="40%"/>
					<m:Label text="Data até"/>
					<m:DatePicker dateValue="" placeholder="Insira a data" id="datapara" required="true" width="40%" />
					<m:Label/>
				
					<m:Button type="Accept" press="submit" text="Confirmar" width="20%" />
				</f:content>
			</f:SimpleForm>
		</l:content>
	</l:Grid>
</mvc:View>

I need to put my

Button(Submit) in the center of page

sem-titulo1234.png (13.7 kB)
Add comment
10|10000 characters needed characters exceeded

  • Try to put a bar control as shown in below code. This worked for me.

    <Bar id="bar0" translucent="false" design="Header">

    <contentMiddle>

    <Button text="Submit" width="100px" type="Accept" />

    </contentMiddle>

    </Bar>

  • Get RSS Feed

1 Answer

  • Best Answer
    Apr 14, 2017 at 02:42 PM

    Hello Rubens,

    sap.ui.layout.form.SimpleForm are more frequently used to display form fills only. In your case, you should move sap.m.button object to an area different, which accepts object in general. The below code renders sap.m.Button in sap.m.FlexBox, and display it on he center of the screen.

        </f:SimpleForm>    
    <m:FlexBox alignItems="Center" justifyContent="Center"> <m:items> <m:Button type="Accept" press="submit" text="Confirmar" width="100%" /> </m:items> </m:FlexBox> </l:content> </l:Grid>

    Regards,
    Arthur Silva

    Add comment
    10|10000 characters needed characters exceeded