Shiny + CSS：在闪亮仪表板侧边栏中对齐动作按钮答案

【问题标题】：Shiny + CSS: Aligning actionButtons in shinydashboard sidebarShiny + CSS：在闪亮仪表板侧边栏中对齐动作按钮
【发布时间】：2016-11-02 07:42:25
【问题描述】：

我正在尝试将一些actionButtons 放在shinydashboard 侧边栏中，并且需要将它们设置为在侧边栏中居中并在分配给它们的空间内水平分布。

这是一个 MWE：

library(shiny)
library(shinydashboard)

foo_body = dashboardBody()
foo_header = dashboardHeader()
foo_sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(
      "A Dashboard", 
      tabName = "tab_overview",
      icon = icon("gamepad")  
    )
  ),
  # add some buttons
  actionButton(inputId = "button1", label = "B 1", icon = icon("paper-plane")),
  actionButton(inputId = "button2", label = "B 2", icon = icon("paper-plane")),
  actionButton(inputId = "button3", label = "B 3", icon = icon("paper-plane"))
)

foo_page = dashboardPage(
  header = foo_header,
  sidebar = foo_sidebar,
  body = foo_body,
  title = "A Dashboard"
)

shinyApp(
  ui = foo_page,
  server = function(input, output) {}
)

这是我需要重新设计的应用程序的相关部分：

欢迎提出任何一般或具体的想法。

【问题讨论】：

标签： css r shiny shinydashboard

【解决方案1】：

您可以像这样为按钮添加样式。我为按钮之间的边留了 1% 的边距

library(shiny)
library(shinydashboard)

foo_body = dashboardBody()
foo_header = dashboardHeader()
foo_sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(
      "A Dashboard", 
      tabName = "tab_overview",
      icon = icon("gamepad")  
    )
  ),
  # add some buttons  
  div(style="display:inline-block;width:32%;text-align: center;",actionButton("button1", label = "B 1", icon = icon("paper-plane"))),
  div(style="display:inline-block;width:32%;text-align: center;",actionButton("button2", label = "B 2", icon = icon("paper-plane"))),
  div(style="display:inline-block;width:32%;text-align: center;",actionButton("button3", label = "B 3", icon = icon("paper-plane")))

)

foo_page = dashboardPage(
  header = foo_header,
  sidebar = foo_sidebar,
  body = foo_body,
  title = "A Dashboard"
)

shinyApp(
  ui = foo_page,
  server = function(input, output) {}
)

【讨论】：

谢谢。这仍然让最左边的按钮开始太左（除了所有单元格的常见 1% 偏移外，基本上为零边距）。有什么方法可以使最左边的按钮的开始与上面的标签对齐（大约）？
你可以玩弄百分比，设置为 34%.31% 和 32%，你应该得到你想要的
您能否添加一个关于该宽度参数究竟是什么的解释，或者指出我可以阅读它的来源？
您可以在这里阅读更多内容：w3schools.com/css/css_max-width.asp、w3schools.com/css/css_inline-block.asp。其实w3schools很好。如果您想知道您的页面是如何呈现的，只需右键单击带有 Shiny 应用程序的页面和inspect 该页面

【解决方案2】：

您可以只使用fluidRow 和column 排列按钮，这样更易于使用，并且可以更好地响应调整大小。

如果您需要更改排列，请调整列宽和偏移量，就像常规 Shiny 布局一样。请注意，随着您的代码在我的机器上显示的不同，闪亮的仪表板样式可能已经演变。

library(shiny)
library(shinydashboard)

foo_body = dashboardBody()
foo_header = dashboardHeader()
foo_sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(
      "A Dashboard", 
      tabName = "tab_overview",
      icon = icon("gamepad")  
    )
  ),
  # add some buttons
  fluidRow(
    column(3, offset = 0, 
           actionButton(inputId = "button1", label = "B 1", icon = icon("paper-plane"))),
    column(3, offset = 0, 
           actionButton(inputId = "button2", label = "B 2", icon = icon("paper-plane"))),
    column(3, offset = 0, 
           actionButton(inputId = "button3", label = "B 3", icon = icon("paper-plane")))
  )
)

foo_page = dashboardPage(
  header = foo_header,
  sidebar = foo_sidebar,
  body = foo_body,
  title = "A Dashboard"
)

shinyApp(
  ui = foo_page,
  server = function(input, output) {}
)

【讨论】：