Skip to Content
0

Align center SAPUI5

Mar 10, 2017 at 06:38 PM

994

avatar image

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)
ui5
10 |10000 characters needed characters left characters exceeded
Former Member

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>

0
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Arthur Silva Apr 14, 2017 at 02:42 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded