C#•2mo ago

Blazor Isolated CSS not working

I have a Blazor app in InteractiveAuto mode and isolated css stopped working. I am not sure when it stopped working or what I changed. The attributes of the affected html elements are generated correctly. The generated css file contains the following:

@import 'ChemStore.Web.Client.bundle.scp.css';

@import 'ChemStore.Web.Client.bundle.scp.css';

I don't believe that the isolated css file is relevant since I tried removing all css I added myself, but I will provide it anyway:

#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;
    }

.header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f8f9fa; /* Light background for the header */
}

.profile-container {
    position: relative;
}

.profile-icon {
    width: 40px; /* Set icon size */
    height: 40px;
    border-radius: 50%; /* Circular icon */
    cursor: pointer;
}

.profile-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    width: 150px;
    z-index: 1000;
}

    .profile-menu ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

        .profile-menu ul li {
            padding: 10px 0;
        }

            .profile-menu ul li a {
                text-decoration: none;
                color: #333;
                display: block;
                padding: 5px;
            }

                .profile-menu ul li a:hover {
                    background-color: #f1f1f1;
                }

.home-icon {
    position: relative;
    width: 40px; /* Set icon size */
    height: 40px;
    cursor: pointer;
}

#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;
    }

.header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f8f9fa; /* Light background for the header */
}

.profile-container {
    position: relative;
}

.profile-icon {
    width: 40px; /* Set icon size */
    height: 40px;
    border-radius: 50%; /* Circular icon */
    cursor: pointer;
}

.profile-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    width: 150px;
    z-index: 1000;
}

    .profile-menu ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

        .profile-menu ul li {
            padding: 10px 0;
        }

            .profile-menu ul li a {
                text-decoration: none;
                color: #333;
                display: block;
                padding: 5px;
            }

                .profile-menu ul li a:hover {
                    background-color: #f1f1f1;
                }

.home-icon {
    position: relative;
    width: 40px; /* Set icon size */
    height: 40px;
    cursor: pointer;
}

3 Replies

NothavidOP•2mo ago

The file is named MainLayout.razor.css and is contained within the same folder as MainLayout.razor:

@inherits LayoutComponentBase

<div class="header">
    <a href="/"><img class="home-icon" src="/res/img/home.png" /></a>
    <img class="profile-icon" src="res/img/profile.png" @onclick="@ToggleProfileMenu" />

    @if(showProfileMenu)
    {
        <div class="profile-menu">
            <ul>
                <li><a href="/profile">Profile</a></li>
                <li><a href="/cart">Cart</a></li>
            </ul>
        </div>
    }
</div>

@Body

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

@code {
    bool showProfileMenu;

    private void ToggleProfileMenu() => showProfileMenu = !showProfileMenu;
}

@inherits LayoutComponentBase

<div class="header">
    <a href="/"><img class="home-icon" src="/res/img/home.png" /></a>
    <img class="profile-icon" src="res/img/profile.png" @onclick="@ToggleProfileMenu" />

    @if(showProfileMenu)
    {
        <div class="profile-menu">
            <ul>
                <li><a href="/profile">Profile</a></li>
                <li><a href="/cart">Cart</a></li>
            </ul>
        </div>
    }
</div>

@Body

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

@code {
    bool showProfileMenu;

    private void ToggleProfileMenu() => showProfileMenu = !showProfileMenu;
}

apparently the @import 'ChemStore.Web.Client.bundle.scp.css'; is not the problem. Ive never worked with css (or html or blazor) before, so I didnt know that I still do not know what the issue was but i fixed it by copying the little code i wrote and pasting it into a new project... I'd still be happy to hear why it was not working anyway

Evyr•2mo ago

check the csproj file and see if the path for the css file is in a remove tag I've had that cause issues with blank blazor templates where it auto removes .razor.css files

NothavidOP•2mo ago

couldn't have been the problem since the html had the attributes so it did in some capacity detect the isolated css

Gaming

Programming

Blazor Isolated CSS not working