为仪表板创建一个自定义主题,但是我遇到了一点麻烦。我在边框和标题上添加了边框,但是当我这样做时,边框似乎无法对齐。从Inspect元素来看,宽度略微偏离了228.2和229.01。
关于如何在边栏上对齐此边框,以便在标题徽标区域和边栏之间看起来连续的任何想法?我宁愿找到问题的根源,而不是仅仅使用css来更改一个的宽度{}。
下面是显示此问题的代码和CSS:
library (shiny)
library (shinydashboard)
library (shinydashboardPlus)
library (shinyjs)
rm(list=ls())
###########################/ui.R/##################################
#Header----
header <- dashboardHeaderPlus(
title = "MRO Dash"
,
enable_rightsidebar = TRUE,
rightSidebarIcon = "sliders"
)
#Right SideBar----
rightsidebar <- rightSidebar()
#SideBar----
sidebar <- dashboardSidebar(
#Sidebar Menu----
div(id = "sidebarChoices",
#style = "position: fxed; overflow: visible;",
sidebarMenu(id = "menuChoice",
menuItem("Functional Dashboards", tabName = "MetricMenu", icon = icon("dashboard"),
menuSubItem("Operations", tabName = "OpsMetricSubMenu", icon = icon("angle-double-right"))
),
menuItem("Test Dashboards", tabName = "2", icon = icon("dashboard")),
menuItem("Salt Dashboards", tabName = "3", icon = icon("dashboard")),
menuItem("Pepper Dashboards", tabName = "4", icon = icon("dashboard"))
)
)
#End )----
) #dashboard sidebar end
#Body----
body <- dashboardBody(
useShinyjs(),
#CSS Formatting----
#Background colors----
#tags$head(tags$style(HTML(".sidebar {height: 90vh; overflow-y: auto;}"))),
tags$head(tags$link(rel="shortcut icon", href="favicon.ico")),
# /* other links in the sidebarmenu when hovered */
# .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{background-color: #E4551F;}
tags$head(tags$style(HTML('
/*** FORMATTING BACKGROUND COLORS ***/
/* Header */
.skin-blue .main-header {
border: 1px solid rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.skin-blue .main-header .logo {
background-color: #3A3F44;
border-right: 1px solid rgba(0, 0, 0, 0.6);
color: #f8f9fa;
}
.skin-blue .main-header .navbar {
background-color: #3A3F44;
border-left: 1px solid rgba(170, 170, 170, 0.3);
}
.skin-blue .main-header .navbar .sidebar-toggle{
color: #f8f9fa;
}
.skin-blue .main-header .navbar .nav>li>a {
color: #f8f9fa;
}
/* Main SideBar */
.skin-blue .main-sidebar {
background-color: #272B30;
color: #f8f9fa;
border: 1px solid rgba(0, 0, 0, 0.6);
box-shadow: 0px 1px 1px rgba(170, 170, 170, 0.3);
}
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
background-color: #272B30;
color: #f8f9fa;
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
/* Hover Color */
.skin-blue .main-header .logo:hover {background-color: #E4551F;}
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{background-color: #E4551F;}
.skin-blue .sidebar-menu > li.active > a {border-left-color: #E4551F;}
.skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li:hover > a {border-left-color: #E4551F;}
.skin-blue .main-header .navbar .nav > li:hover > a {background-color: #E4551F;}
.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color: #E4551F;}
/* Right SideBar */
.control-sidebar-dark+.control-sidebar-bg {background: #272B30;}
.control-sidebar-dark+.nav.nav-tabs.nav-justified.control-sidebar-tabs {background: #272B30;}
.control-sidebar-dark+.control-sidebar.control-sidebar-dark.control-sidebar-open {background: #272B30;}
/* Body */
.content-wrapper, .right-side {background-color: #272B30;}
')))
)
#Builds Dashboard Page----
ui <- dashboardPagePlus(header, sidebar, body, rightsidebar)
###########################/server.R/###############################
server <- function(input, output, session) {
}
#Combines Dasboard and Data together----
shinyApp(ui, server)