Search code examples
sapui5

How to have input fields arranged in HBox/VBox?

I have a table and in one of the column's I am trying to show 4 input fields with 2*2 manner

For eg i have a Sample Column :

I have tried VBox as :

                        <Column>
                        <m:Text text="Sample Column" />
                        <template>
                            <m:VBox visible="true">
                                <m:Input value="test1" editable='false'/>
                                <m:Input value="test2" editable='false'/>
                                <m:Input value="test3" editable='false'/>
                                <m:Input value="test4" editable='false'/>
                            </m:VBox>
                        </template>
                    </Column>

and the result is as:

I have tried HBox(replacing VBox above and some random text) and it shows all columns as:

Using HBox

May i know how to achieve 2*2 as (trying to explain):

enter image description here

Solution

  • try this:

    <m:VBox visible="true">
    <m:HBox>
        <m:Input value="test1" editable='false'/>
        <m:Input value="test2" editable='false'/>
    </m:HBox>
    <m:HBox>
        <m:Input value="test3" editable='false'/>
        <m:Input value="test4" editable='false'/>
    </m:HBox>
</m:VBox>