I want three buttons in a column

[Keith A Price]

I need a dialog with three buttons the user can click in response.

Right now, the three buttons are wrapping horizontally.

How can I display them in a column (one below the other)?

I tried this but it didn't change the display:

    <DialogButtons>

        <div class="d-flex flex-column">

            <DialogButton IsPrimary="true"

                          Content="Replace Existing With This"

                          OnClick="@OnBtnClick" />

            <DialogButton IsPrimary="false"

                          Content="Show Previous Run"

                          OnClick="@OnBtnClick" />

            <DialogButton IsPrimary="false"

                          Content="Add This Run as an Updated Version"

                          OnClick="@OnBtnClick" />

            </div>

</DialogButtons>

[Gunasekar Kuppusamy]

Hi Keith,

Greetings from Syncfusion support.

We have validated your reported query from our end, and we have prepared a sample with three dialog buttons aligned vertically.

Please refer the below styles 

<style>

    .e-footer-content .e-btn {

        display: block;

        float: right;

        clear: right;

        margin-top: 5px;

    }

</style>

Output:

Sample: https://www.syncfusion.com/downloads/support/forum/169001/ze/Blazor_App-1607178967

Please check the sample and let us know if the sample meets your requirement.

Regards,

Gunasekar

[Keith A Price]

Awesome! Thanks so much.

I'm going to have to shift my thinking about how to work with Syncfusion components. Looks like the <style> tag will solve a lot of my challenges. Thanks again!

[Gunasekar Kuppusamy]

Hi Keith,  

  

Thanks for the update. 

 

We are glad that the provided solution helps from your end. Please let us know if you need further assistance.  

  

Regards,  

Gunasekar