Material button cut off

Question

Hello,Material or Material3 buttons have cut off shadows inside containers.For example, here is a button inside an Accordion: Your Information Save I can fix it by adding margin-bottom: 10px; margin-right: 10px;But, that mis-aligns the button, and I was hoping there is a better way to tell CSS to draw the button's shadow over other content.Thanks for your advice!

Ashokkumar Karuppasamy · Answer

Hi Gene,

We suggest adjusting the DataForm styles by setting the padding to 5px to resolve the mentioned issue. Please refer to the attached code snippet and sample demonstration of the solution. Try the solution and let us know if you need any further assistance.

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.DataForm

@using Syncfusion.Blazor.Buttons

@using System.ComponentModel.DataAnnotations

<SfAccordion>

<AccordionItems>

<AccordionItem Expanded="true">

<HeaderTemplate>Your Information</HeaderTemplate>

<ContentTemplate>

<SfDataForm ID="BasicInfoForm" Model="@EmployeeDetail" FormName="BasicInfoForm">

<FormButtons>

<SfButton>Save</SfButton>

</FormButtons>

</SfDataForm>

</ContentTemplate>

</AccordionItem>

</AccordionItems>

</SfAccordion>

<style>

#BasicInfoForm{

padding: 5px;

}

</style>

@code {

public class EmployeeDetails

{

[Required(ErrorMessage = "Please enter your first name.")]

[Display(Name = "First Name")]

public string FirstName { get; set; }

[Required(ErrorMessage = "Please enter your last name.")]

[Display(Name = "Last Name")]

public string LastName { get; set; }

[Required(ErrorMessage = "Please enter your email address.")]

[EmailAddress(ErrorMessage = "Please enter a valid email address.")]

[Display(Name = "Email ID")]

public string Email { get; set; }

[Required]

[Display(Name = "Date of Birth")]

public DateTime? DOB { get; set; }

}

private EmployeeDetails EmployeeDetail = new EmployeeDetails()

{

FirstName = "Anne",

LastName = "Lawsen"

};

}

Scrrenshot:

Regards,
Ashok