cancel
Showing results for 
Search instead for 
Did you mean: 

How to make a label and a text in the same line in Simple Form?

Former Member
0 Kudos

Hi experts,

    How to make a label and a text in the same line in Simple Form?

My Code:

<core:FragmentDefinition

  xmlns="sap.m"

  xmlns:l="sap.ui.layout"

  xmlns:f="sap.ui.layout.form"

  xmlns:core="sap.ui.core">

  <Dialog id="DisplayAccountDialog" title="{i18n>DisplayAccountTitle}" modal="true"

  icon="sap-icon://activity-individual" stretchOnPhone="false"

  showCloseButton="ture">

  <content>

  <l:Grid defaultSpan="L12 M12 S12" width="auto">

<l:content>

  <f:SimpleForm id=""

  minWidth="200em"

  maxContainerCols="2"

  editable="false"

  layout="ResponsiveGridLayout"

  title=""

  labelSpanL="4"

  labelSpanM="4"

  emptySpanL="0"

  emptySpanM="0"

  columnsL="2"

  columnsM="2">

  <f:content>

  <Label text="{i18n>SerialNo}" />

  <Text text="{SerialNo}" />

  <Label text="{i18n>PreqQty}" />

  <Text text="{PreqQty}" />

  <Label text="{i18n>GLAcct}" />

  <Text text="{GLAcct}" />

  <Label text="{i18n>CostCtr}" />

  <Text text="{CostCtr}" />

  </f:content>

  </f:SimpleForm>

</l:content>

  </l:Grid>

  </content>

  <beginButton>

  <Button text="{i18n>Confirm}" press="confirm" />

  </beginButton>

  </Dialog>

</core:FragmentDefinition>

and how to make the marginTop and marginBottom smaller?

<Table id="Items" headerText="" items="{Items}" >

   <columns>

  <Column hAlign="Center">

  <header>

  <Label text="{i18n>PreqItem}" />

  </header>

  </Column>

  <Column hAlign="Center" visible="{device>/isNoPhone}">

  <header>

  <Label text="{i18n>Quantity}"/>

  </header>

  </Column>

  <Column hAlign="Center" visible="{device>/isNoPhone}">

  <header>

  <Label text="{i18n>DelivDate}"/>

  </header>

  </Column>

  <Column hAlign="Center">

  <header>

  <Label text="{i18n>ShortText}" />

  </header>

  </Column>

  <Column hAlign="Right" width="3em">

  <header>

  <Button icon="sap-icon://add" press="handleAddItem" />

  </header>

  </Column>

    </columns>

  <ColumnListItem type="Navigation" press="handleLineItemPress" >

  <cells>

  <ObjectIdentifier title="{PreqItem}" />

  <ObjectNumber number="{Quantity}" numberUnit="{Unit}" visible="{device>/isNoPhone}"/>

  <Text text="{DelivDate}"  visible="{device>/isNoPhone}"/>

  <Text text="{ShortText}"/>

<Button icon="sap-icon://delete" press="handleDeleteItem" />

  </cells>

  </ColumnListItem>

  </Table>

thank you.

best regards,

felix.

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

You can use a VBox inside the form. Have a look at this.

Edit fiddle - JSFiddle

Former Member
0 Kudos

Hi indrajith,

thanks for your reply,it works,but why there is a long space on rigth side?

<?xml version="1.0"?>

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

    <Dialog id="DisplayAccountDialog" title="{i18n&gt;DisplayAccountTitle}" modal="true" icon="sap-icon://activity-individual" stretchOnPhone="false" showCloseButton="ture">

        <content>

            <l:Grid defaultSpan="L12 M12 S12" width="auto">

                <l:content>

                    <f:SimpleForm id="" minWidth="1024" maxContainerCols="2" editable="false" layout="ResponsiveGridLayout" title="" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1">

                        <f:content>

                            <HBox>

                                <Label text="{i18n&gt;SerialNo}" />

                                <Text text="{SerialNo}" />

                            </HBox>

                            <HBox>

                                <Label text="{i18n&gt;PreqQty}" />

                                <Text text="{PreqQty}" />

                            </HBox>

                            <HBox>

                                <Label text="{i18n&gt;GLAcct}" />

                                <Text text="{GLAcct}" />

                            </HBox>

                            <HBox>

                                <Label text="{i18n&gt;CostCtr}" />

                                <Text text="{CostCtr}" />

                            </HBox>

                        </f:content>

                    </f:SimpleForm>

                </l:content>

            </l:Grid>

        </content>

        <beginButton>

            <Button text="{i18n&gt;Confirm}" press="confirm" />

        </beginButton>

    </Dialog>

</core:FragmentDefinition>

Former Member
0 Kudos

You can add a styleclass to HBox and use margin-left to adjust according to your requirement.

Former Member
0 Kudos

OK,thank you.

Answers (1)

Answers (1)

santhu_gowdaz
Active Contributor
0 Kudos

labelFor may solve this-SAPUI5 Button

or else change

  labelSpanL="3"
  labelSpanM="3"
  emptySpanL="4"
  emptySpanM="4"
  columnsL="1"
  columnsM="1"

and check it.

SAPUI5 Explored

Former Member
0 Kudos

hi Santhosh,

  thanks for your reply,I have try,But it doesn't work in popup dialog,it works well in view.