Skip to content

style.md

Latest commit

 

History

History
78 lines (59 loc) · 3.04 KB

style.md

File metadata and controls

78 lines (59 loc) · 3.04 KB
layout post
title Style and Appearance in Blazor DataForm Component | Syncfusion
description Checkout and learn here all about Style and Appearance in Syncfusion Blazor DataForm component and more.
platform Blazor
control DataForm
documentation ug

DataForm Customization

The Syncfusion® Blazor DataForm component provides extensive customization options to enhance the appearance and usability of forms. You can customize the layout, labels, input elements, validation messages, and action buttons using CSS styles and the CssClass property to match your application requirements.

Style and Appearance in Blazor DataForm Component

The following content provides the exact CSS structure that can be used to modify the DataForm control’s appearance based on the user preference.

Customizing DataForm container

Use the following CSS to customize the DataForm container.

.e-data-form {
    border: 2px solid #6366f1;
    border-radius: 8px;
    padding: 16px;
}

{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLRNJWxUprJdtOR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "Blazor DataForm border" %}

Customizing DataForm label text

Use the following CSS to customize the label text of form fields.

.e-data-form .e-form-label {
    font-weight: 500;
    color: #374151;
}

{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLnZTWxURwbFzex?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "Blazor DataForm lable" %}

Customizing DataForm input elements

Use the following CSS to customize input elements inside the DataForm.

.e-data-form .e-input-group.e-control-container {
    border-radius: 6px;
    border-color: #47c80c;
    border-bottom-color: #47c80c !important;
}

{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBdtfWngvDdHjkY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "Blazor DataForm input elements" %}

Customizing validation message

Use the following CSS to customize validation message styles.

.e-data-form .validation-message {
    color: #ab1010;
    font-size: 12px;
}

{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhnDpiHfhzDDrZt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "Blazor DataForm validation message" %}

Customizing DataForm action buttons

Use the following CSS to customize action buttons in DataForm.

.e-data-form .e-control.e-btn.e-lib{
    background-color: #6366f1;
    border-color: #6366f1;
}

{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBRZpWHfKgMTRYr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "Blazor DataForm action button" %}