Search code examples
htmlcssasp.net-corerazor-pages

Why is my css not showing up in my @renderbody content

I cannot seem to get my CSS to apply to the CSHTML file rendered in through @renderbody.

_layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - PremierPlantWebApp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/tablestyles.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/PremierPlantWebApp.styles.css" asp-append-version="true" />
    <!-- Your head content here -->
    <script src="~/js/site.js"></script>
</head>
<body>
    <div class="wrapper">
        <nav class="navbar">
            <button class="hamburger-btn" onclick="toggleSidebar()">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
        </nav>
        <div class="sidebar">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <!-- Add more navigation links here -->
            </ul>
        </div>
        <div class="content">
            <div class="container">
                <main role="main" class="pb-3">
                    @RenderBody()
                </main>
            </div>
        </div>
    </div>
    <footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
    </footer>
</body>
</html>

The html rendered in through @renderbody

@*Define model*@
@model IEnumerable<Employee>

@*Define viewData*@
@{
    ViewData["Title"] = "List of employees";
}
@*Code*@
<div class="row">
    <div class="col-md-8 offset-md-2">
        
        <div class="table-responsive">
            <table class="table table-striped list" style="border: 5px solid red;">
                <thead>
                    <tr>
                        <th>@Html.DisplayNameFor(model => model.Id)</th>
                        <th>@Html.DisplayNameFor(model => model.Forename)</th>
                        <th>@Html.DisplayNameFor(model => model.Surname)</th>
                        <th>@Html.DisplayNameFor(model => model.Role)</th>
                        <th>@Html.DisplayNameFor(model => model.Wage)</th>
                        <th>@Html.DisplayNameFor(model => model.MilageFlag)</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td class="align-middle">
                                @Html.DisplayFor(modelItem => item.Id)
                            </td>
                            <td class ="align-middle">
                                @Html.DisplayFor(modelItem => item.Forename)
                            </td>
                            <td class="align-middle">
                                @Html.DisplayFor(modelItem => item.Surname)
                            </td>
                            <td class="align-middle">
                                @Html.DisplayFor(modelItem => item.RoleId)
                            </td>
                            <td class="align-middle">
                                @Html.DisplayFor(modelItem => item.Wage)
                            </td>
                            <td class="align-middle">
                                @Html.DisplayFor(modelItem => item.MilageFlag)
                            </td>
                            <td class="align-middle">
                                <a class="btn btn-outline-primary action-btn"><i class="bi bi-pencil-square"></i>Edit</a>
                                <a class="btn btn-outline-info action-btn"><i class="bi bi-eye"></i>Details</a>
                                <a class="btn btn-outline-danger action-btn"><i class="bi bi-trash"></i>Remove</a>

                            </td>
                        </tr>
                    }
                </tbody>

            </table>
        </div>
    </div>
</div>

tablestyles.CSS

.table.list {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
}

    .table.list th, .list td {
        text-align: left;
        padding: 8px;
    }

.table.table-striped.list tr:nth-child(even) {
    background-color: #002366 !important;
}

    .table.list .action-btn {
        margin-right: 10px;
    }

I have tried everything I can think of: Renaming classes Removing bootstrap clearing cache

The only thing that I have managed to make work is applying inline styling to the HTML being rendered in.

Solution

  • I have tried everything I can think of: Renaming classes Removing bootstrap clearing cache

    The only thing that I have managed to make work is applying inline styling to the HTML being rendered in.

    Well, based on your scenario and shared description I have tried to investigate your issue, I have written your css defination on tablestyles.css file as following:

    enter image description here

    On top of that, I have set the external css file reference within layout file as following:

    enter image description here

    While, I was testing your scenario, Its working absolutely fine as expected, I have observed, all the css getting implemented without any issue which you can see as following,

    enter image description here

    In addition, you can see, in network trace, /css/tablestyles.css? external css file has been loaded accordingly, also when inspected the table attributes, It has shown all the css configuration. You can refer to below image.

    enter image description here

    Output:

    enter image description here

    Note: Please have a look carefully, if any of your existing css files overriding tablestyles.css when loading, you can check that by looking into network trace or by inspecting element. Apart from above steps, your shared files and configuration is working accordingly in my test. For better fidings, you can disable all other external css file for the time being except css/tablestyles.css if that implemented accordingly.