How to enable scrollbar in card control

Question

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 · Answer

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 referenceSample: https://www.syncfusion.com/downloads/support/forum/168292/ze/Blazor_App-1514379355Please check the sample and let us know if the sample meets your requirement.
Regards,
Gunasekar

KINS · Answer

sorry for late reply..how to set card height dynamically

Gunasekar Kuppusamy · Answer

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