R Shiny - 修复了 Shiny 仪表板中的侧边栏和主要 header

Question

我有一个简化的闪亮仪表板（请参阅下面的代码）。我想修复侧边栏和主栏 header。因此，在此处其他帖子的帮助下，我编写了一个 CSS 文件来解决该问题。

.sidebar {
  color: #FFF;
  position: fixed;
  width: 220px;
  white-space: nowrap;
  overflow: visible;
}

.main-header {
  position: fixed;
  width:100%;
}

几乎可以工作...边栏和主要 header 已修复，但主要 header 隐藏第一个框的 header 存在问题。我猜 CSS 中有几个关键字可以解决问题，但我没有找到它们（CSS 中的新手...）。

闪亮的仪表板代码如下。

library(ggplot2)
library(shiny)
library(shinydashboard)

CountPlotFunction <- function(MyData)
{
  MyPlot <- ggplot(data = MyData, aes(x = MyData)) +
    geom_bar(stat = "count", aes(fill = MyData)) +
    geom_text(stat = "count", aes(label = ..count..)) +
    scale_x_discrete(drop = FALSE) +
    scale_fill_discrete(drop = FALSE)
  return(MyPlot)
}

# The data
var1 <- c("Russia","Canada","Australia","Australia","Russia","Australia","Canada","Germany","Australia","Canada","Canada")
var2 <- c("UnitedStates","France","SouthAfrica","SouthAfrica","UnitedStates","SouthAfrica","France","Norge","SouthAfrica","France","France")
var3 <- c("Brazil","Colombia","China","China","Brazil","China","Colombia","Belgium","China","Colombia","Colombia")
df <- data.frame(var1, var2, var3)

# The Shiny app 
Interface <- 
{
  dashboardPage(
    title = "Dashboard", skin = "yellow",
    dashboardHeader(title = "Dashboard"),

  dashboardSidebar(
    sidebarMenu(
      sidebarSearchForm(textId = "searchText", buttonId = "searchButton", label = "Search..."),
      menuItem(text = "Analysis", tabName = "Analysis", icon = icon("dashboard")))
  ),

  dashboardBody(
    tags$head(includeCSS('www/style.css')),

      tabItem(tabName = "Analysis",
              fluidPage(box(title = "Choose the questions", status = "warning", solidHeader = TRUE, collapsible = FALSE, width = 12,
                            checkboxGroupInput(inputId = "ChooseQuestion", label = NULL, choices = colnames(df),
                                        selected = colnames(df)[1])),
                        box(title = "Results", status = "warning", solidHeader = TRUE, collapsible = FALSE, width = 12,
                            uiOutput("ui_plot")))
      )
    )  
  )
}

Serveur <- function(input, output)
{
  # gen plot containers
  output$ui_plot <- renderUI({ 
    out <- list()
    if (length(input$ChooseQuestion)==0){return(NULL)}
    for (i in 1:length(input$ChooseQuestion)){
      out[[i]] <-  plotOutput(outputId = paste0("plot",i))
    }  
    return(out) 
  })

  # render plots
  observe({  
    for (i in 1:length(input$ChooseQuestion)){  
      local({
        ii <- i 
        output[[paste0('plot',ii)]] <- renderPlot({ 
          if ( length(input$ChooseQuestion) > ii-1 ){  
            return(CountPlotFunction(MyData = df[input$ChooseQuestion[[ii]]]))
          } 
          NULL
        })
      })
    }                                  

  })

}

shinyApp(ui = Interface, server = Serveur)

Answer 1

将以下内容添加到您的 CSS 文件中，它应该可以工作。

.content {
  padding-top: 60px;
}

Answer 2

我不知道这是不是因为一年前情况发生了变化，但我的运气要好得多：

.content {
  margin-top: 50px;
}

有padding-top像熊兵的回答一样在底部留下了一个奇怪的空白space（另外，50px不是60px）。

希望对后代有所帮助

R Shiny - 修复了 Shiny 仪表板中的侧边栏和主要 header

R Shiny - Fixed sidebar and main header in a Shiny dashboard

css

r

shiny

shinydashboard