Blazorise: Table does not have hover capability and dark theme.

Created on 15 Apr 2020 · 5Comments · Source: stsrki/Blazorise

Be aware it is the first time that I'm using Blazorise but I believe I followed all the instructions. The issue is with a <Table> having hover param and dark theme, it does not work. I also tried the Counter example but I don't see much.

Using the attached code it should be easy to reproduce or at least tell me what I'm missing. I tried with the NuGet packages and also with the code from GitHub (added the relevant projects to my solution). The issues are the same for both approaches. I also tried with the links to CSS/JS frameworks as well as local copies (see index.html).

Versions:

Blazorise version is 0.8.8.4.
The code is based on the latest Blazor Web Assembly release, i.e. version 3.2.0-preview3.20168.3.
Visual Studio is 16.6.0 Preview 2.1.

FILES

index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>ManagementConsole</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

    <!--<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="fontawesome-free-5.13.0-web/css/all.css" rel="stylesheet" />-->

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

    <link href="css/site.css" rel="stylesheet" />
    <link href="css/admin.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

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

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!--<script src="jquery/dist/jquery.slim.min.js"></script>
    <script src="@popperjs/core/dist/umd/popper.min.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>-->  

    <script src="_content/Blazorise/blazorise.js"></script>
    <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>

    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

Program.cs:

using Blazored.LocalStorage;
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;
using ManagementConsole.Services;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System.Threading.Tasks;

namespace ManagementConsole
{
    public class Program {

        private static Configuration.WsEndpoint[] _wsEndpoints;

        public static Configuration.WsEndpoint[] WsEndpoints
        {
            get => _wsEndpoints.Clone() as Configuration.WsEndpoint[]; 
        }

        public static async Task Main(string[] args) {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.Services.AddBlazoredLocalStorage();
            builder.Services.AddAuthorizationCore();
            builder.Services.AddScoped<AuthenticationStateProvider, ApiAuthenticationStateProvider>();
            builder.Services.AddScoped<IAuthService, AuthService>();
            builder.Services.AddOptions();

            builder.Services.AddBlazorise(options =>
            {
                options.ChangeTextOnKeyPress = true;
            })
                .AddBootstrapProviders()
                .AddFontAwesomeIcons();

            builder.Services.AddBaseAddressHttpClient();

            builder.RootComponents.Add<App>("app");

            var host = builder.Build();
            host.Services
              .UseBootstrapProviders()
              .UseFontAwesomeIcons();

            RetrieveWsEndpoints(host);

            await host.RunAsync();
        }

        private static void RetrieveWsEndpoints(WebAssemblyHost host)
        {
            var config = new ManagementConsole.Configuration(host.Configuration);
            _wsEndpoints = config.WsEndpoints;
        }
    }
}

WebService.razor:

@page "/webservices"

<h3>Web services</h3>

<Table IsHoverable="true" Theme="Theme.Dark">
    <TableHeader>
        <TableRow>
            <TableHeaderCell>Site</TableHeaderCell>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Type</TableHeaderCell>
            <TableHeaderCell>Enabled</TableHeaderCell>
            <TableHeaderCell>Url</TableHeaderCell>
            <TableHeaderCell>Description</TableHeaderCell>
            <TableHeaderCell>Notes</TableHeaderCell>
            <TableHeaderCell>Valid</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        @foreach (var endpoint in _wsEndpoints)
        {
            <TableRow>
                <TableRowCell>@endpoint.Site</TableRowCell>
                <TableRowCell>@endpoint.Name</TableRowCell>
                <TableRowCell>@endpoint.Type</TableRowCell>
                <TableRowCell>@endpoint.Enabled</TableRowCell>
                <TableRowCell>@endpoint.Url</TableRowCell>
                <TableRowCell>@endpoint.Description</TableRowCell>
                <TableRowCell>@endpoint.Notes</TableRowCell>
                <TableRowCell>@endpoint.IsValid()</TableRowCell>
            </TableRow>
        }
    </TableBody>
</Table>

I was hoping to be able to hover on the table rows and to see a dark header as on here

See attached screenshot.

table

Thanks

Source

sroy2020

Most helpful comment

@MitchellNZ You're right. I'm writing documentation now anyway so I will update it. tnx

@sroy2020 Have you tried with ThemeContrast?

stsrki on 16 Apr 2020

👍2

All 5 comments

Try changing your <TableHeader> to <TableHeader ThemeContrast="ThemeContrast.Dark">

@stsrki I think these docs might be out-of-date?

MitchellNZ on 16 Apr 2020

👍1

@MitchellNZ You're right. I'm writing documentation now anyway so I will update it. tnx

@sroy2020 Have you tried with ThemeContrast?

stsrki on 16 Apr 2020

👍2

Hi,

Using <TableHeader ThemeContrast="ThemeContrast.Dark"> made it works. According to what you're saying it looks like I'll have to dig into the code and not to trust the doc. ;)

What about the IsHoverable? I tried on Table, TableBody, TableRow and TableRowCell but unfortunately it's not working.

Thanks

sroy2020 on 16 Apr 2020

Hoverable should be on Table.

I already fixed the documentation for ThemeContrast and it should be visible with the next release. Unfortunately there are some small typos here and there, but considering it's done just by one person I thinks it's more than good.

Anyways, you should always go with the documentation, otherwise we wouldn't find this error. And then when coding go with what IntelliSense is giving you. That is the best advice I can give you.

stsrki on 16 Apr 2020

👍1

Hi,

I'll follow your advice!

Unfortunately IsHoverable does not work for me but because the theming works I'll close the issue. Let me know if there's something else I should try for IsHoverable. Should I create an issue for it?

Thanks a lot

sroy2020 on 16 Apr 2020

Was this page helpful?

0 / 5 - 0 ratings