1. Home
  2. Forum
  3. Blazor
  4. bootstrap grid in dialog component

bootstrap grid in dialog component

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


6 Replies
BS Buvana Sathasivam Syncfusion Team June 23, 2022 03:11 PM UTC

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


SA Sarah replied to Buvana Sathasivam June 25, 2022 05:18 AM UTC

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>








BS Buvana Sathasivam Syncfusion Team June 28, 2022 03:56 AM UTC

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


BS Buvana Sathasivam Syncfusion Team June 30, 2022 01:08 PM UTC

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


SA Sarah July 2, 2022 04:38 AM UTC

Hi Buvana Sathasivam,


Thank you for your guidance.




BS Buvana Sathasivam Syncfusion Team July 4, 2022 09:06 AM UTC

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


Loader.
Up arrow icon