DataGrid Responsiveness Issue

[James K]

I am having issues with DataGrid height adjusting to its container height. I have tried following Responsive with parent container guide but it seems to expand beyond the height of the flex box container I'm using. 

I have attached a sample blazor webapp for review. Appreciate your help with this.

Attachment: BlazorApp1_67ae878.zip

[Guhanathan Ramanathan]

Hi James K,

 

Based on your query,The issue occurs because the SfGrid inside the .grid-container exceeds the height of its flexbox parent due to the absence of a defined height. To fix this, adding overflow: hidden; to the .grid-container will prevent the grid from expanding beyond its parent’s height, ensuring it stays properly contained within the available space without overflow.

@page "/"

<PageTitle>Home</PageTitle>

<div class="container">

    <div class="cards-container">

        <SfCard CssClass="card" />

        <SfCard CssClass="card" />

        <SfCard CssClass="card" />

        <SfCard CssClass="card" />

    </div>

    <div class="grid-container">

        <SfGrid class="dropshadow" DataSource="@Students" EnableStickyHeader="true" EnableHover="true"

                style="max-width: 1000px; min-height: 0;" Height="100%">

                <GridColumn Field=@nameof(Student.Class) HeaderText="Class" Width="60"></GridColumn>

            </GridColumns>

        </SfGrid>

    </div>

</div>

<style>

    .container {

        display: flex;

        height: calc(100vh - 3rem);  

        flex-direction: column;

        overflow: hidden;

    }

</style>

@code {

    

    protected override void OnAfterRender(bool firstRender)

    {

        if (firstRender)

        {

            for (int i = 0; i < 25; i++)

            {

                Students.Add(new Student

                    {

                        Name = names[i],

                        Age = Random.Shared.Next(8, 15),

                        Class = $"C{i + 1}"

                    });

            }

            StateHasChanged();

        }

    }

}

Regards,

Guhanathan R

[James K]

thanks that works but as soon as resizing the browser, the grid gets chopped off again. shouldn't it resize to adapt its container new height?

[Guhanathan Ramanathan]

Hi James K,

 

Based on your query, the issue occurs because the SfGrid inside the .grid-container exceeds the height of its flexbox parent, which happens due to the absence of a defined height. To resolve this, we recommend adding overflow: hidden; to the .grid-container class. This will prevent the grid from expanding beyond the parent container's height, ensuring it stays properly contained without any overflow.

<PageTitle>Home</PageTitle>

<div class="container">

    <div class="cards-container">

        <SfCard CssClass="card" />

        <SfCard CssClass="card" />

        <SfCard CssClass="card" />

        <SfCard CssClass="card" />

    </div>

    <div class="grid-container">

        <SfGrid class="dropshadow" DataSource="@Students" EnableStickyHeader="true" EnableHover="true"

                style="max-width: 1000px;" Height="100%">

                <GridColumn Field=@nameof(Student.Class) HeaderText="Class" Width="60"></GridColumn>

            </GridColumns>

        </SfGrid>

    </div>

</div>

<style>

    .container {

        display: flex;

        height: calc(100vh - 10rem);

        flex-direction: column;

        overflow: hidden;

    }

    .cards-container {

        display: grid;

        gap: 18px;

        margin: 25px;

        justify-content: center;

        grid-template-columns: repeat(auto-fit, 260px);

    }

    .grid-container {

        flex: 1;

        display: flex;

        justify-content: center;

        margin: 25px;

        overflow: hidden;

    }

    .card {

        width: 250px;

        min-width: 250px;

        font-family: 'Inter';

        background-color: green;

    }

</style>

@code {

    public class Student

    {

        public string Name { get; set; }

        public int Age { get; set; }

        public string Class { get; set; }

    }

}

Regards,

Guhanathan R

Attachment: Style_3ecc3286.gif