Создаю собственную тему для моей панели, но у меня небольшой сбой.Я добавляю границы к боковой панели и заголовку, но когда я это делаю, они, кажется, не выравниваются.Если посмотреть на элементы 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)