design of column inside table

Question

I have problem with aligning of elements

I have sap.m.Table and inside of table I have sap.m.InputListItem

 var tbl= new sap.m.Table({
                width: "100%",
                headerToolbar: new sap.m.Toolbar({
                    content: [
                        new sap.ui.core.Icon({
                            src : "nav-back",
                            press: this.onNavBack.bind(this)
                        })
                        , new sap.m.Title({
                            text: this.roleDetail
                        })]
                }),
                columns: [new sap.m.Column({
                    header: new sap.m.Text({
                        text: " Menu"
                    })
                }),
                    new sap.m.Column({
                        header: new sap.m.Text({
                            text: " App"
                        })
                    })
                ],
                items: [
                    fieldOfColumnItems
                ]
            });

in the cycle I fill this variable fieldOfColumnItems

fieldOfColumnItems.push(new sap.m.ColumnListItem({
                    cells: [menu[i], menuItems[i]]
                }))

How can I make those dropdowns to be on the right side? I want it to look nice. Any ideas?

Answer 1

use sap.m.FlexBox:

...
  var oTable = new sap.m.Table({
    columns: [
      new sap.m.Column({
        header: new sap.m.Text({
          text: "Menu"
        })
      }),
      new sap.m.Column({
        header: new sap.m.Text({
          text: "App"
        })
      })
    ],
    items: [
      new sap.m.ColumnListItem({
        cells: [
          new sap.m.FlexBox({
            justifyContent: "SpaceBetween",
            alignItems: "Center",
            items: [
              new sap.m.Label({
                text: "foo"
              }),
              new sap.m.Select({
                items: [
                  new sap.ui.core.Item({
                    text: "bar"
                  })
                ]
              }),
            ]
          })
        ]
      }),
      new sap.m.ColumnListItem({
        cells: [
          new sap.m.FlexBox({
            justifyContent: "SpaceBetween",
            alignItems: "Center",
            items: [
              new sap.m.Label({
                text: "longerfoo"
              }),
              new sap.m.Select({
                items: [
                  new sap.ui.core.Item({
                    text: "barfits"
                  })
                ]
              }),
            ]
          })
        ]
      })
    ]
  });
...

executable example

add on:

due to your comment:

fieldOfColumnItems.push(
  new sap.m.ColumnListItem({
    cells: [
      new.sap.m.FlexBox({
        justifyContent: "SpaceBetween",
        alignItems: "Center",
        items: [
          menu[i],
          menuItems[i]
        ]
      })
    ]
  })
)