使 Hangfire 仪表板全宽（和自定义样式）答案

【问题标题】：Make Hangfire Dashboard Full Width (and custom styling)使 Hangfire 仪表板全宽（和自定义样式）
【发布时间】：2021-12-27 19:40:58
【问题描述】：

目前，似乎还没有记录在案的方法可以轻松更改 Hangfire 的仪表板布局和样式以完成以下任务：

使用完整的浏览器宽度（当您的作业 ID 和名称很长时很烦人）
无法调整样式以更好地匹配父网站的外观、调整网格列宽等

已经有 Hangfire 拉取请求来添加这种类型的功能，但没有任何东西被集成到 Hangfire.Core 中，也没有我能找到的插件。在自己查看了核心源之后，我认为仅仅为了添加这个自定义而维护自己的 fork 太痛苦了。

那么，开发人员要做什么？

【问题讨论】：

标签： hangfire

【解决方案1】：

这是对 Hangfire Dashboard 进行重新样式化的一种方法，它相当轻巧，但需要相同的来源。

高层：

照常设置 Hangfire，设置仪表板，确保一切正常
您可以直接链接到已配置的 Hangfire Dashboard 链接（例如 /Admin/Hangfire），而是在您的网站上创建一个页面，其中包含指向 Hangfire Dashboard 的 iframe。
结合使用 js 和 css 从父页面调整仪表板 iframe。

快速示例：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="iframeTest.aspx.cs" Inherits="WebApp.iframeTest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .hf {
            border: none;
            width: 100%;
            height: 500px;
        }
    </style>
    <script type="text/javascript">
        function FixHangFireStyling() {
            //Set page/container to full width
            $("#wrap .container", frames['hf'].document).css("margin-left", "10px");    //adjust the px value as your parent layout requires
            $("#wrap .container", frames['hf'].document).css("margin-right", "250px");  //adjust the px value as your parent layout requires
            $("#wrap .container", frames['hf'].document).css("width", "100%");

            //Remove the word breaking and predefined column (td) widths on the grids
            $(".js-jobs-list-row td", frames['hf'].document).css("width", "auto");
            $(".js-jobs-list-row td", frames['hf'].document).css("word-break", "normal");
        };

        function FixHeight(obj) {
            //Auto adjust the height of the iframe based on the height of the Hangfire page (adds an extra 250 to account for my page parent page's height/layout)
            obj.style.height = (obj.contentWindow.document.documentElement.scrollHeight + 250) + 'px';
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="right_col" role="main">
        <div class="col-md-12">
            <iframe class="hf" name="hf" id="hf" src="/Admin/Hangfire" onload="FixHangFireStyling(); FixHeight(this)" scrolling="no"></iframe>
        </div>
    </div>
</asp:Content>

结果（全宽、在 iframe 中导航时重新应用样式、调整网格列以摆脱烦人的文本换行以及快速的 iframe 高度自动调整）：

（24"W 显示器，1920px 分辨率）

【讨论】：