Change the width of the Header separate line

[Kavindu Gamage]

Hi, 
i want to change the width of the Header Separate line in the dialog. I will provide a example. 

[UdhayaKumar Duraisamy]

The separator below the Dialog header is created by adding a border-bottom to the Header section. You can also add the custom separator at the sample level using a Header template and customize it using CSS, as shown in the code snippet below:

    .e-dialog .e-dlg-header-content {

        border-bottom: none;

    }

 

    #header_content {

        width: 25%;

        border-bottom: 1px solid #dee2e6;

        padding-bottom: 3%;

    }

 

Sample: https://blazorplayground.syncfusion.com/embed/BZVpNwDFTGZJGodI?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Kavindu Gamage]

Hi, 

Can i know how to remove the border bottom of the body section?

Thank you.

[UdhayaKumar Duraisamy]

You can modify the line under the content of the Dialog component using the CSS class shared below:

    .e-dialog .e-footer-content {

        border-bottom-left-radius: 0;

        border-bottom-right-radius: 0;

        border-top: none;

        bottom: 0;

        display: block;

        right: 0;

        width: 100%;

    }

For more clarity, you can refer to the sample linked below: https://blazorplayground.syncfusion.com/embed/VZBzNPhYxDxDcBbP?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5