How to enable scrollbar in card control

[KINS]

I have used 20 textbox control and two grid control  inside card control.I would like to know how to enable vertical scroll in card control and prevent default browser scrollbar. 

[Gunasekar Kuppusamy]

Hi Kins, 

Greetings from Syncfusion support.

We have validated your query "I have used 20 textbox control and two grid control inside card control." from our end.

 

We can enable the scrollbar when the card content height exceeds the actual card height.

Refer to the below styles to enable the scrollbar in the card

Styles:

        #FirstCard {

        height: 700px;

        }

        .e-card .e-card-content {

            overflow-y : auto;

        }

We have also created a sample for your reference
Sample: https://www.syncfusion.com/downloads/support/forum/168292/ze/Blazor_App-1514379355

Please check the sample and let us know if the sample meets your requirement.

Regards,

Gunasekar

[KINS]

sorry for late reply..

how to set card height dynamically

[Gunasekar Kuppusamy]

Hi Kins,

Good day to you.

You cannot change the height of the card component directly in Blazor but you achieve this requirement using the CSS.

We have prepared a sample for your reference. In this sample, we have changed the CssClass property using the button click. So corresponding style will be applied to the card.

Code Snippets:

<button class="e-btn" @onclick="@OnClick">Change</button>

<SfCard ID="FirstCard" CssClass="@cssClass">

    <CardContent>

        <SfTextBox CssClass="e-outline" Placeholder="Outlined" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

       . . .

    </CardContent>

</SfCard>

@code {

    public string cssClass { get; set; } = "staticHeight";

    public void OnClick()

    {

        cssClass = "dynamicHeight";

    }

}

<style>

    .staticHeight {

        height: 300px;

    }

    .dynamicHeight {

        height: 400px;

    }

    .e-card .e-card-content {

        overflow-y: auto;

    }

</style>

Sample: https://www.syncfusion.com/downloads/support/forum/168292/ze/Blazor_App-975801929

Please check the sample and let us know if the sample meets your requirement.

Regards,

Gunasekar