bootstrap grid in dialog component

[Sarah]

Hi,

I used EnableResize = "true" in the Dialog component. The content of the dialog is as follows. Unfortunately the bootsrap grid does not apply.

 <div class="col-md-4 col-sm-12">

....

</div>

thank you

[Buvana Sathasivam]

Hi Sarah,

Greetings from Syncfusion support.

We were unable to replicate your problem. In the below sample, we have rendered a bootstrap grid inside the SfDialog component. Please find the below code and sample for your reference.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/V_6232022_195833-1267810424

Index.razor

<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible" EnableResize="true">

    <DialogTemplates>

        <Header> Dialog </Header>

        <Content>

            <div class="row">

                 <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>

                 <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>

                 <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>

            </div>

       </Content>

    </DialogTemplates>

</SfDialog>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NEEA5E~1772728935

Can you please share the below details about your requirement?

• Share your code or runnable sample to reproduce your issue at our end.
• Please share your package version.

Regards,

Buvana S

[Sarah]

Hi Buvana Sathasivam,

I changed the following source

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NEEA5E~1772728935

<div class="row">

    <div class="col-md-4 col-sm-12" style="background-color:lavender;">content</div>

    <div class="col-md-4 col-sm-12" style="background-color:lavenderblush;">content</div>

    <div class="col-md-4 col-sm-12" style="background-color:lavender;">content</div>

</div>

<SfDialog Width="800px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible" EnableResize="true">

    <DialogTemplates>

        <Header> Dialog </Header>

        <Content>

            <div class="row">

                 <div class="col-md-4 col-sm-12" style="background-color:lavender;">content</div>

                 <div class="col-md-4 col-sm-12" style="background-color:lavenderblush;">content</div>

                 <div class="col-md-4 col-sm-12" style="background-color:lavender;">content</div>

            </div>

       </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton Content="OK" IsPrimary="true" OnClick="@OkClick" />

        <DialogButton Content="Cancel" OnClick="@CancelClick" />

    </DialogButtons>

    <span id="message">@ClickStatus</span>

</SfDialog>

[Buvana Sathasivam]

Hi Sarah,

Currently, we are validating your reported query. We will update you with further details on or before June 30, 2022.

Regards,

Buvana S

[Buvana Sathasivam]

Hi Sarah,

We have checked your requirements. We let you know that the bootstrap grid layout changed their layout based on browser width and did not change their layout based on parent element width. In your shared code also, the bootstrap grid layout is placed inside the parent element(SfDialog) width. So, it is not changed based on the parent element width.

Regards,

Buvana S

[Sarah]

Hi Buvana Sathasivam,

Thank you for your guidance.

[Buvana Sathasivam]

You're welcome. Please get back to us if you need any further assistance.