shinydashboard::box header 中的样式 shinyWidget::dropdownButton

Question

背景

我正在尝试将 shinyWidget::dropdownButton 放在 shinydashboard::box 的 header 中。该按钮应具有使用可折叠框时创建的按钮的外观和感觉 (box(..., collapsible = TRUE).

在一些 JavaScript 的帮助下，我能够移动下拉菜单，在我看来，这比我自己构建所有 HTML 更简单。

下面的代码完成了我想做的事情，但是我在 css 上苦苦挣扎，因为下拉列表中的元素部分是白色的（我猜这是有道理的，因为它们是（大） children class .box-tools)

我想要的

我希望下拉列表中的所有控件看起来就像我将下拉列表放在框的 body 中一样：

目标： body

中的下拉菜单

当前情况： header

中的下拉列表

问题

我怎样才能做到这一点？我必须使用哪些 css 规则，以确保任何类型的控件看起来都像在框的 body 中一样？我可以更轻松地实现相同的行为吗？（例如，通过将我所有的控件包装在另一个元素的下拉列表中）？我确实了解 css 的基础知识，但在这里我感到有点不知所措，我需要考虑哪些规则才能达到预期的结果。

代码

library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)

makeDropDown <- function(i) {
  dropdownButton(
    h3("Heading"),
    selectInput(paste0("sel", i), "Select:", LETTERS),
    downloadButton(paste0("down", i), "Load"),
    circle = FALSE,
    icon = icon("cog")
  )
}

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    box(solidHeader = TRUE,
        status = "info",
        title = "Box",
        div(
          makeDropDown(1),
          class = "box-tools pull-right",
          id = "moveme"
        ),
        makeDropDown(2)
    )
  )
)

server <- function(input, output, session) {
  runjs("$('.box-header').append($('#moveme').detach())")
}

shinyApp(ui, server)

Answer 1

你是对的，一些 CSS 规则被覆盖了，你可以使用一些内联 CSS 和 !important 来控制外观：

makeDropDown <- function(i) {
  dropdownButton(
    tags$div(
      style = "color: black !important;", # for text
      h3("Heading"),
      selectInput(paste0("sel", i), "Select:", LETTERS),
      downloadButton(
        outputId = paste0("down", i), label = "Load", 
        style = "background-color: #f4f4f4 !important; color: #444 !important; border: 1px solid #ddd !important;" # for button
      )
    ),
    circle = FALSE,
    icon = icon("cog")
  )
}

否则，也许@DivadNojnarg shinydashboardPlus 有更好的解决方案，我会问他！

shinydashboard::box header 中的样式 shinyWidget::dropdownButton

Style shinyWidget::dropdownButton in shinydashboard::box header

css

r

shiny

shinydashboard

adminlte