How to resize an IgbDialog in blazor?

77 views Asked by At

I'm trying to resize an IgbDialog in blazor(server side) using Ignite UI components. Unfortunately, I could not resize the element adding width and height to the default component. I apologize for my ignorance. Thanks in advance!

see code: https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/dialog

"<div class="container vertical">
    <IgbButton @onclick="OnDialogShow" [email protected]>Show Dialog</IgbButton>
    <IgbDialog @ref="DialogRef" Title="Confirmation" Width="500px" Height="800px"> 
        <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf   
files?</p>
        <IgbButton slot="footer" @onclick="OnDialogHide" [email protected]>Cancel</IgbButton>
        <IgbButton slot="footer" @onclick="OnDialogHide" [email protected]>OK</IgbButton>
    </IgbDialog>
</div>"
1

There are 1 answers

2
RBee On

You have to wrap the content of the dialog in a div and style it.

<div class="container vertical">
    <IgbButton @onclick="OnDialogShow" [email protected]>Show Dialog</IgbButton>
    <IgbDialog @ref="DialogRef" Title="Confirmation">
        <div style="width:500px;height:500px;">
            <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
            <IgbButton slot="footer" @onclick="OnDialogHide" [email protected]>Cancel</IgbButton>
            <IgbButton slot="footer" @onclick="OnDialogHide" [email protected]>OK</IgbButton>
        </div>
    </IgbDialog>
</div>