Blazorise offcanvas component always pops out with Visibility:hidden

49 Views Asked by At

I am using Blazorise for my Blazor WASM project.

I was using v1.2 but have need of the new 'OffCanvas' component and so needed to update to 1.3 or 1.4. I chose 1.4 having read the release notes for both version updates stating that no changes were needed.

As I invoke the offcanvas element, it shows the overlay to block the rest of the screen, but the actual offcanvas element is invisible. I proved this using the debug tools in the browser.

Blazorise offcanvas element

Looking at the CSS I can see the .offcanvas visibility is set to 'hidden', and ineed if I untick it to override the visibility, it appears and works as expected.

Offcanvas CSS class

I have cut and pasted the code striaght from the samples:

<Offcanvas @ref="offcanvasRHS" ShowBackdrop Placement="Placement.Bottom">
     <OffcanvasHeader>
         Offcanvas Start
         <CloseButton Clicked="@HideOffcanvas" />
     </OffcanvasHeader>
     <OffcanvasBody>
         Offcanvas Content
     </OffcanvasBody>
 </Offcanvas>

    private async Task ShowOffcanvasRHS()
    {
        await offcanvasRHS.Show();
    }

    private async Task HideOffcanvas()
    {
        await offcanvasRHS.Hide();
    }

I did check that the stuff in the head section was up to date so copied this from the sample demo:

    <!-- BLAZORISE head section -->
    <!--<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

    <link href="_content/Blazorise/blazorise.css?v=1.4.0.0" rel="stylesheet">
    <link href="_content/Blazorise.Sidebar/blazorise.sidebar.css?v=1.4.0.0" rel="stylesheet">
    <link href="_content/Blazorise.Snackbar/blazorise.snackbar.css?v=1.4.0.0" rel="stylesheet">
    <link href="_content/Blazorise.SpinKit/blazorise.spinkit.css?v=1.4.0.0" rel="stylesheet">

Any ideas what if anything I am doing wrong? Thanks

0

There are 0 best solutions below