在 Shiny App 中对齐 ActionButton答案

【问题标题】：Align ActionButton in Shiny App在 Shiny App 中对齐 ActionButton
【发布时间】：2016-09-15 05:37:43
【问题描述】：

在下面的应用程序中，我想更改ActionButton的三个方面：

在其列中居中按钮
缩小按钮与顶部文本之间的间距
增加按钮与下方面板之间的间距。

这可以在shiny内完成吗？

library(shiny)
library(shinyBS)

ui <- 
  fluidPage(
    fluidRow(
      column(12,
             bsCollapse(id="instructionsOutput", open="instructionsPanel",
                        bsCollapsePanel("instructionsPanel",
                                        "This is a panel with text",
                                        style="info"
                                        )
                        )
             ),
      column(12,
             actionButton("p1Button", "Expand/Collapse Text")
             )
    ),
  sidebarLayout(
    sidebarPanel(),
    mainPanel()
  )
)

server <- function(input, output, session) {
  observeEvent(input$p1Button, ({
                updateCollapse(session, "instructionsOutput",
                               open="instructionsPanel",
                               close="instructionsPanel")  
  })
  )

}

shinyApp(ui, server)

【问题讨论】：

您需要将 CSS 和/或 javascript 与 tags$style 或 tags$script 结合使用。基本上，找到您要更改的项目的id 或class，然后对该项目应用适当的css 样式。例如，要使按钮居中，应用align:center；要减少顶部的间距，请查找 margin-top 或 padding-top（在浏览器中使用 Inspect element 查找）
另一种可能的解决方案是将样式代码直接添加到 Shiny 元素中。例如：fluidRow(style="padding-bottom:20px;")。这可能不适用于某些 Shiny 元素。
它将以与您的other 两个questions 类似的方式工作。正如@warmoverflow 指出的那样，您需要知道css 才能进行这些调整

标签： html css r shiny

【解决方案1】：

回复很晚...但是如果有人正在寻找可能的解决方案，您可以尝试以下方法。与上面金雄兵的回答类似，您可以将style 和align 作为参数添加到shiny::column

ui <- 
  fluidPage(
    fluidRow(
      column(
        12,
        bsCollapse(
          id="instructionsOutput", 
          open="instructionsPanel",
          bsCollapsePanel(
            "instructionsPanel",
            "This is a panel with text",
            style="info"
          )
        )
      ),
      column(
        12,
        actionButton(
          "p1Button", 
          "Expand/Collapse Text"
        )
        , align = "center"
        , style = "margin-bottom: 10px;"
        , style = "margin-top: -10px;"
      )
    ),
    sidebarLayout(
      sidebarPanel(),
      mainPanel()
    )
  )

server <- function(input, output, session) {
  observeEvent(input$p1Button, ({
    updateCollapse(
      session, "instructionsOutput",
      open="instructionsPanel",
      close="instructionsPanel"
    )  
  })
  )

}

shinyApp(ui, server)

【讨论】：