SFGrid custom header style with tailwind

3 Replies
2 Participants

Created by
SE Sebastian

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Jul 26, 2024 03:48 AM UTC

Last Activity On
Jul 30, 2024 02:15 PM UTC

Want to subscribe?
SIGN IN

Hi team! I've been trying to change the header color without success for a WASM app.

I installed tailwind following this “Tailwind CSS VS2022 Editor Support” de Theron Wang and works fine!

This is my code

Image_4006_1721964879740

index.html
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>stockfefb4blazor</title>
    <base rel='nofollow' href="/" />


    <link rel='nofollow' href="https://cdn.syncfusion.com/blazor/26.1.35/styles/tailwind.css" rel="stylesheet"/>
    <link rel="stylesheet" rel='nofollow' href="css/app.css" />
    <link rel='nofollow' href="app-tailwind.css" rel="stylesheet"/ >


</head>
<body>

    <div id="app">
        
    </div>
<div id="blazor-error-ui">

        An unhandled error has occurred.
        <a rel='nofollow' href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

app.css

@import "customsf.css";
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
.invalid {
    outline: 1px solid red;
}
.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
.blazor-error-boundary {
    background: url(too large code!) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}    .blazor-error-boundary::after {

content: "An error has occurred."

}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }
        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;}

customsf.css

/* Custom styles */
.e-headercell {
    @apply bg-amber-400;
}

app-tailwind.css

a very large file with tailwind classes such us "mt-2 bg-amber-500" and etc.

and finally, the component with the grid

@layout LayoutInicio
@page "/clientes"

@using StockFrontEndBlazor.APIRequests
@using StockFrontEndBlazor.Models
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@using StockFrontEndBlazor.GridData
@using Syncfusion.Blazor.Grids;
@using Syncfusion.Blazor.Buttons;


<PageTitle>Clientes</PageTitle>

<div class="mb-2 mt-2">
    <SfButton class="ml-2" CssClass="e-success">
        <span class="e-icons circle-add align-middle"></span>
        Agregar
     </SfButton>
    <SfButton class="ml-2" CssClass="e-info">
        <span class="e-icons edit align-middle"></span>
        Modificar
    </SfButton>
    <SfButton class="ml-2" CssClass="cus">
        <span class="e-icons circle-remove align-middle"></span>
        Eliminar
     </SfButton>
    <button class="bg-amber-300">
        <span class="e-icons circle-remove align-middle"></span>
        Eliminar
    </button>

</div>
<SfGrid TValue="Cliente" ID="Grillin" AllowPaging="true" Query="@query" >
     <GridEvents TValue="Cliente" />
     <GridPageSettings PageSize="10"  />
    <SfDataManager AdaptorInstance="@typeof(GridCustomDataAdaptor)" Adaptor="Adaptors.CustomAdaptor" />
     <GridColumns>
        <GridColumn Field=@nameof(Cliente.Idtipodoc) HeaderText="idtipodoc"  />
        <GridColumn Field=@nameof(Cliente.Tipodocdescripcion) HeaderText="tipodocdesc"  />
        <GridColumn Field=@nameof(Cliente.Cuit) HeaderText="CUIT" />
        <GridColumn Field=@nameof(Cliente.Nombre) HeaderText="Nombre" />
        <GridColumn Field=@nameof(Cliente.Domiciliocomercial) HeaderText="Domicilio comercial" />
        <GridColumn Field=@nameof(Cliente.Idcondiva) HeaderText="idocndiva" />
        <GridColumn Field=@nameof(Cliente.Ivadescripcion) HeaderText="IVA" />
        <GridColumn Field=@nameof(Cliente.Telefono) HeaderText="Teléfono" />
        <GridColumn Field=@nameof(Cliente.Condiciondeventa) HeaderText="Condición de vta" />
        <GridColumn Field=@nameof(Cliente.Ibalicuota) HeaderText="Alícuota IB" />
        <GridColumn Field=@nameof(Cliente.Email) HeaderText="Email" />
        <GridColumn Field=@nameof(Cliente.Tipofact) HeaderText="Tipo factura" />
    </GridColumns>
</SfGrid>

@code{
    public Query query = new Query();
}

<style>
    .circle-add::before {
        content: '\e768';
    }
</style>

<style>
    .edit::before {
        content: '\e730';
    }
</style>

<style>
    .circle-remove::before {
        content: '\e81b';
    }
</style>

Thank you very much for the help you could provide me!

3 Replies

PS Prathap Senthil Syncfusion Team July 26, 2024 01:21 PM UTC

Hi Sebastian,

Based on the reported problem and the screenshot you shared, it seems that you did not reference the customsf.css file in the index.html. This is likely the cause of the issue you are facing. Kindly refer to the simple sample and code snippet provided below for your reference.

<!DOCTYPE html>

<head>

<title>BlazorApp7</title>

rel="stylesheet" />

type="text/javascript"></script>

</head>

Regards,
Prathap Senthil

Attachment: BlazorApp7_(2)_ced7de5.zip

SE Sebastian replied to Prathap Senthil July 27, 2024 05:10 PM UTC

Thanks! whit bootstrap works! the customsf.css in your example


.e-headercell {
   background-color:lightblue;
}

but not with tailwind, after changing the code in the customsf.css to this

.e-headercell {
@apply bg-amber-400;
}

I have trid this and works

<style>
    .e-headercell {
        background: #5DADE2;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color:white;
        font-size: 5px;
        font-style: bold;
    }
</style>

but, when i change to this (tailwind), it doesn't work :(

<style>
    .e-headercell {
      @apply bg-amber-500;
    }
</style>

I'll keep trying!

PS Prathap Senthil Syncfusion Team July 30, 2024 02:15 PM UTC

Regarding the issue you reported, it is not related to the Grid component. We suspect the issue is related to a common problem. Please refer to the attached code snippet and screenshot.

Reference: https://tailwindcss.com/docs/installation/play-cdn

<p>Not Working</p>

</div>

<p>Working</p>

</div>

//customsf.css

.custom-class {

@apply bg-amber-400;

}

Need More Help?

Get personalized assistance from our support team.

Contact Support

3 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
SE Sebastian
Platform
Blazor
Control
Grid
Created On
Jul 26, 2024 03:48 AM UTC
Last Activity On
Jul 30, 2024 02:15 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support