样式shinyWidget :: dropdownButton在shinydashboard :: box标题中

Question

背景

我想在shinyWidget::dropdownButton的标题中放置一个shinydashboard::box。按钮应具有使用可折叠框（box(..., collapsible = TRUE)时）创建的按钮的外观和感觉。

在一些JavaScript的帮助下，我能够移动下拉列表，这对我来说似乎更容易，而不是自己构建所有的HTML。

下面的代码做了我想要做的事情，但是我正在努力与css，因为下拉列表中的元素部分是白色的白色（这是有道理的我猜是因为他们是类.box-tools的（大）孩子）

我想要的是

我希望下拉列表中的所有控件看起来好像我将下拉列表放在框的正文中：

目标：身体下降

当前情况：标题中的下拉列表

问题

我怎样才能做到这一点？我必须使用哪种css规则，以确保任何类型的控件看起来像在盒子的主体？我可以更轻松地实现相同的行为吗？ （例如，将所有控件包装在另一个元素的下拉列表中）？我知道我在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规则被覆盖了，你可以使用一些带有!important的内联CSS来控制外观：

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有更好的解决方案，我会问他！