0

Hi I am relatively new to openui5. I am designing a login page. My form is designed with "responsive grid layout". In my form component I have a single "FormContainer". I want that container to be vertically center without any effect to my responsive design.

The following is the current screen shot:-

enter image description here

The code of my xml is as below:-

<mvc:View

xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns="sap.m" >

<VBox class="sapUiSmallMargin" >
    <f:Form id="Form"
        editable="true"
        ariaLabelledBy="Title1"> 

        <f:layout>
            <f:ResponsiveGridLayout />
        </f:layout>
        <f:formContainers>
            <f:FormContainer ariaLabelledBy="Title2" >

                <f:formElements>
                    <f:FormElement >
                        <f:fields>
                            <Image
                                src="icons/user.jpg"
                                densityAware="false"
                                width="60px" >
                                <layoutData>
                                    <l:GridData span="L1 M1 S1" />
                                </layoutData>
                            </Image>
                            <Input value="{SupplierName}" id="name">
                                <layoutData>
                                    <l:GridData span="L11 M11 S11" />
                                </layoutData>
                            </Input>
                        </f:fields>
                    </f:FormElement>
                    <f:FormElement >
                        <f:fields>
                            <Image
                                src="icons/password.jpg"
                                densityAware="false"
                                width="60px" >
                                <layoutData>
                                    <l:GridData span="L1 M1 S1" linebreak="true" />
                                </layoutData>
                            </Image>
                            <Input value="{Street}" >
                                <layoutData>
                                    <l:GridData span="L11 M11 S11" />
                                </layoutData>
                            </Input>

                        </f:fields>
                    </f:FormElement>

                </f:formElements>

            </f:FormContainer>

        </f:formContainers>
    </f:Form>
</VBox>

So kindly help me achieving this. How to vertically center the white box in the browser without effecting the responsiveness of the form?

Muralidhar Yaragalla
  • 417
  • 5
  • 26

1 Answers1

0

You can center align the VBox by providing it height and using the property - justifyContent: center;

<VBox class="sapUiSmallMargin" height='100%' justifyContent ='Center'>
<!-- rest of the code remains same. -->
Rahul Bhardwaj
  • 2,303
  • 1
  • 17
  • 28