sfGrid style disturbed by Bootstrap 5.1 div class="row"

[Geoffrey]

hi,

sf.Blazor.grid v20.4.0.38

Bootstrap.min.cs V5.1.0

sf.Blazor.Themes V20.4.0.8 --> I use fluent.css

Context:

I use an SfGrid like this:

<div class="col-lg-12 control-section">

     <div class="content-wrapper">

         <div class="row">

             <SfGrid />

        </div>

    </div>

</div>

But at runtime the SfGrid is not displayed properly, we can see that the body and the toolbar have padding.

It seems to come from the following rule:

When I disable padding-left and padding-right it's ok.

If I put bootstrap.min.css V3.1 back it's ok too.

Is it a bug?

How to correct?

Thanks.

Geff

[Balamurugan Lakshmanan]

Hi Gef,

Greeting from Syncfusion support.

You can try the following steps to resolve your issue.

1.Use the latest version of Syncfusion Blazor Grid and Bootstrap. Make sure that the versions you are using are compatible with each other.

2.Check if there are any custom styles in your project that are conflicting with the Syncfusion Blazor Grid styles. You can try removing them temporarily to see if it resolves the issue.

If the issue still persist, Kindly share us the issue reproducible simple sample for further validation at our end.

Kindly get back to us if you have further queries.

Regards,

Bala.

[Geoffrey]

hi,

I created you a simple project and just added the 3 divs that I use in datagridfeatures.razor.

I hope this will help you.

Geff

Attachment: SyncfusionBlazorAppBootStrap51_f7e009d0.zip

[Monisha Saravanan]

Hi Geoffrey,

Query: “If I put bootstrap.min.css V3.1 back it's ok too.”

The issue occurs due the CSS from the below mentioned class. It is overriding the inbuilt styles. We are facing the same issue when using the bootstrap.min.js also. We have attached the modified sample for your reference. So kindly share us in which version of bootstrap you are not facing the mentioned issue.

<div id="ControlRegion">

    <div class="col-lg-12 control-section">

        <div class="content-wrapper">

            <div class="row">

Please let us know if you have any concerns.

Regards,

Monisha

Attachment: SyncfusionBlazorAppBootStrap51_bba51fdf.zip

[Geoffrey]

hi,

I don't understand your answer.

I want to use bootstrap in version 5.1, it is also the version used when creating a new Blazor project by Visual Studio.

I fix my problem with a css override like this:

.row:has(.sf-grid) {

    --bs-gutter-x: 0rem !important;

}

but this is not a permanent solution for me.

Are you going to make a correction so that it is compatible without override?

I tested your solution, there is no change

thx.

[Monisha Saravanan]

Hi Geoffrey,

Yes, we could see that the reported issue occurs due to the below class. But we suggest you to use sample level solution as an workaround. Because this can be customized at sample level. We could not able to provide source level fix because the customization may vary depends upon specific project. So it is not possible to provide fix by considering certain scenarios.

Please let us know if you have any concerns.

Regards,

Monisha