CODEWITHSUNDEEP
sapui5
Aayushk
Aayushk

Reputation: 15

How to put a line break in sapui5 text or input box?

I cant seem to find a way to put the <DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/> and <Select selectedKey="{/recipient3/name}" id="input-c" forceSelection="false"> in new line. They show at the same line but I would like them in two different lines.

<mvc:View controllerName="Workspace.controller.App" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
    xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">
    <Page title="{i18n>homePageTitle}">
        <content>
            <Panel width="auto" class="sapUiResponsiveMargin">
                <Image src="https://www.enggwave.com/wp-content/uploads/2016/11/Sopra-Steria-Logo.png" width="100px" height="100px"
                    class="sapUiResponsiveMargin"></Image>
                <Text text="Plot No. 20 21 Seaview Special Economic Zone"/>
                <Image src="https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Sopra_Steria_logo.svg/1280px-Sopra_Steria_logo.svg.png" width="500px"
                    height="100px" class="sapUiResponsiveMargin"></Image>
            </Panel>
            <Panel>
                <f:SimpleForm id="SimpleFormChange354" width="100%" minWidth="1024" maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
                    title="FORM" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1" class="editableForm">
                    <f:content>
                        <Label text="NAME : " labelFor="input-a" design="Bold"/>
                        <Input id="input-a" placeholder="Enter Name" value="{/recipient1/name}" valueLiveUpdate="true" width="100%" required="true"/>
                        <Label text="DATE : " labelFor="input-b" design="Bold"/>

                            <DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/>

                            <InputListItem label="Country" >
                                <Select selectedKey="{/recipient3/name}"  id="input-c" forceSelection="false">
                                    <core:Item key="Greece" text="Greece"/>
                                    <core:Item key="Mexico" text="Mexico"/>
                                    <core:Item key="Norway" text="Norway"/>
                                    <core:Item key="New Zealand" text="New Zealand"/>
                                    <core:Item key="Netherlands" text="Netherlands"/>
                                </Select>
                            </InputListItem>
                            <Button text="{i18n>showHelloButtonText}" press="onShowHello"/>

                    </f:content>
                </f:SimpleForm>
            </Panel>
        </content>
    </Page>
</mvc:View>

Upvotes: 1

Views: 4867

Answers (1)

GellertPeterSiskovits
GellertPeterSiskovits

Reputation: 86

Try putting the two in a Vbox

<Vbox>   
   <DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" 
    change="handleChange" class="sapUiSmallMarginBottom"/>

  <InputListItem label="Country" >
       <Select selectedKey="{/recipient3/name}"  id="input-c" 
        forceSelection="false">
            <core:Item key="Greece" text="Greece"/>
            <core:Item key="Mexico" text="Mexico"/>
            <core:Item key="Norway" text="Norway"/>
            <core:Item key="New Zealand" text="New Zealand"/>
            <core:Item key="Netherlands" text="Netherlands"/>
       </Select>
  </InputListItem>

  <Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
</Vbox>

Upvotes: 1

Related Questions