Space between buttons in sap.m.Dialog buttons aggregation

Question

I am working on sap.m.Dialog control with 3 buttons and i need to show button "A" on the left side, button "B" in the middle and button "C" on the right side.

Please refer below code and screenshot

Controller.js

var oDialog = new Dialog({
    title: "Dialog",
    type: 'Message',
    content: new Text({ text: "" }),
    buttons : [
        new sap.m.Button({
            text: "A"
        }),
        new sap.m.Button({
            text: "B"
        }),
        new sap.m.Button({
            text: "C"
        })
    ],
    afterClose: function() {
        oDialog.destroy();
    }
});
oDialog.open();

My workaround:

var oDialog = new Dialog({
    title: "Dialog",
    type: 'Message',
    content: new Text({ text: "" }),
    buttons : [
        new sap.m.Button({
            text: "A"
        }),
        // below added few dummy buttons to show space like effect at UI
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({
            text: "B"
        }),
        // below added few dummy buttons to show space like effect at UI
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({
            text : "C"
        })
    ],
    afterClose: function() {
        oDialog.destroy();
    }
});
oDialog.open();

How it looks after adding empty buttons

i have added button with blank text, somehow i have achieved to show spaces in between buttons, but is this a right way to add space like effect at UI ? or is there any proper way to satisfy my requirement ?

Answer 1

Would work with custom css. Insert in your manifest.json a css file,

...
  "sap.ui5": {
    ... 
    "resources": {
      "css": [{
        "uri": "css/style.css"
      }]
    }
  }

Create style.css within the uri css/style.css. Give in your view the buttons ids. Target within the stlye.css the buttons with #. Align the buttons within the style.css.

Answer 2

Try putting button "A" in aggregation beginButton, button "B" in aggregation buttons and button "C" in aggregation endButton.

Answer 3

Edit: An alternative way would be to place a Bar control in the content aggregation of the dialog.

var dialog = new sap.m.Dialog({
            title: "Dialog",
            type: 'Message',
            content: 
                new sap.ui.layout.VerticalLayout({
                    width:"100%",
                    content: [
                        new sap.m.Text({
                        text: 'One of the keys to success is creating realistic goals that can be achieved in a reasonable amount of time.'                    
                        }).addStyleClass("sapUiSmallMargin"),
                        new sap.m.Bar({
                            design: "Footer",
                            contentLeft:  new sap.m.Button({ text: "Button A"}),
                            contentMiddle:  new sap.m.Button({ text: "Button B"}),
                            contentRight:  new sap.m.Button({ text: "Button C"})
                        })
                    ]
                }),
            afterClose: function() {
                dialog.destroy();
            }
        });
        dialog.addStyleClass("sapUiNoContentPadding ");

Original Answer:

You can assign widths in percentages to responsively handle it. Since you are using 3 buttons you can assign a width of about 30% to each of the buttons. This may cause some issues on mobile devices because of the dynamically added margins which can be removed with the standard "sapUiNoMarginBegin" & "sapUiNoMarginEnd" classes.

Code Snippet:

buttons : [
                new sap.m.Button({
                    text: "Button A",
                    width:"30%"
                }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin"),
                new sap.m.Button({
                    text: "Button B",
                    width:"30%"
                }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin"),
                new sap.m.Button({
                    text : "Button C",
                    width:"30%"
                }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin")
            ],

Answer 4

@Prashob

Use Flexbox control as below:

<FlexBox height="100px" alignItems="Center" justifyContent="Center">
                <items>
                    <Button text="Submit" type="Emphasized" width="300px" press="submitDetails"/>
                </items>
            </FlexBox>

You need to change the justifyContent property according to where you need the button. For three buttons you will require 3 flexbox which will contain each button. Maybe to put them side to side you can use HBOX control.

              <HBox>
                    <items>
                        <FlexBox id="fb1" height="100px" alignItems="Center" width="400px" justifyContent="SpaceAround">
                            <items>
                                <Button id="b1" text="Start" width="200px"/>
                            </items>
                        </FlexBox>
                        <FlexBox id="fb2" justifyContent="Center" height="100px" alignItems="Center" width="400px">
                            <items>
                                <Button id="b2" text="Center" width="200px"/>
                            </items>
                        </FlexBox>
                        <FlexBox id="fb3" justifyContent="End" height="100px" width="400px" alignItems="Center">
                            <items>
                                <Button id="b3" text="End" width="200px"/>
                            </items>
                        </FlexBox>
                    </items>
                </HBox>

Check the output of above code as below:

You can change the justifyContent property accordingly and the width of button and flexboxes to get the desired result.