闪亮的仪表板侧栏与标题徽标CSS的宽度不同

时间:2018-12-13 14:17:46

标签: html css r shinydashboard

为仪表板创建一个自定义主题,但是我遇到了一点麻烦。我在边框和标题上添加了边框,但是当我这样做时,边框似乎无法对齐。从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)

0 个答案:

没有答案