Problem with Pico and Blazor wasm #314

chiefley · 2023-02-15T02:57:18Z

chiefley
Feb 15, 2023

Pico and Blazor should be a winning combination for us backend developers who are CSS challenged. I patched in the Company example into a new Blazor wasm app. It almost works except Blazor wraps all the active stuff in an div with the id of app.

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Azure Static Web Apps Blazor Sample</title>
    <base href="/" />
    <!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">

    <!-- Pico.css -->
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
    <link href="css/app.css" rel="stylesheet" />

    <!-- Custom styles for this example -->
    <link rel="stylesheet" href="css/custom.css">

    <!--<link href="Client.styles.css" rel="stylesheet" />-->
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
<!-- Minimal theme switcher -->
<script src="../js/minimal-theme-switcher.js"></script>
</body>
</html>

Blazor puts all the dynamic SPA content wrapped in that div. The problem is that the presence of that div changes the CSS such that positioning of things in the Company example are messed up. I saved my page to a file, and brought it up in the browser and it had the same problem. I removed the app div wrapper and brought it up again and the problem was gone.

Has anyone here used pico in a Blazor wasm app? It's probably something simple but I am truly css challenged. Here is the content of the app.css file. Thanks in advance,

#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(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

Answered by chiefley

Feb 16, 2023

Ok, Solved my own problem. Header, Main, and Footer are direct descendants of Body. So I added custom css to make them also direct descendents of #app, which is the id of the div Blazor needs to insert its main component.

As you can see, I am pretty much css challenged, so Pico is going to be just what I need,

View full answer

chiefley · 2023-02-16T13:08:22Z

chiefley
Feb 16, 2023
Author

Ok, Solved my own problem. Header, Main, and Footer are direct descendants of Body. So I added custom css to make them also direct descendents of #app, which is the id of the div Blazor needs to insert its main component.

As you can see, I am pretty much css challenged, so Pico is going to be just what I need,

0 replies

scott-parkhill · 2024-01-22T03:49:43Z

scott-parkhill
Jan 22, 2024

@chiefley what did you do exactly? I'm having a problem with it, it is not behaving as expected at all. I added #app>header, etc., along with any occurrence of body>header, etc., and that did not fix things.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with Pico and Blazor wasm #314

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Problem with Pico and Blazor wasm #314

chiefley Feb 15, 2023

Replies: 2 comments

chiefley Feb 16, 2023 Author

scott-parkhill Jan 22, 2024

chiefley
Feb 15, 2023

chiefley
Feb 16, 2023
Author

scott-parkhill
Jan 22, 2024