Shiny + CSS: Aligning actionButtons in shinydashboard sidebar

Question

I am trying to place some actionButtons in a shinydashboard sidebar, and need to style them to be centered within the sidebar and horizontally distributed within the space that is allocated to them.

Here is an 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) {}
)

Here is the relevant part of the app that I need to re-style:

Any ideas, general or specific, would be welcome.

Answer 1

You can add style to your buttons, like so. I left 1% margin for sides between the buttons

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) {}
)

Answer 2

You can arrange the button with just fluidRow and column, which is easier to use and can respond to resizing better.

Adjust the column width and offset if you need to change the arrangement, just like regular Shiny layout. Note the shiny dashboard style may have evolved as your code is showing differently in my machine.

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) {}
)