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.

score 13 · Answer 1 · answered Nov 02 '16 at 08:40

13

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

answered Nov 02 '16 at 08:40

Pork Chop

28,528
5
63
77

Thanks for this. This still has the leftmost button begin too far left (basically zero margin except the common 1% offset for all cells). Any way to make it so that the leftmost button's start aligns with the tab above (approximately)? – tchakravarty Nov 02 '16 at 08:45
You can play around with percentages, set those at 34%.31% and 32%, you should get what you want – Pork Chop Nov 02 '16 at 09:06
Could you add an explanation of what exactly that width parameter is, or point to a source where I can read up on it? – tchakravarty Nov 02 '16 at 09:49
You can read more here:http://www.w3schools.com/css/css_max-width.asp, http://www.w3schools.com/css/css_inline-block.asp. In fact, the w3schools is very good. If you want to know how your pages being rendered just right click on the page with Shiny app and `inspect` that page – Pork Chop Nov 02 '16 at 09:56

score 9 · Answer 2 · answered Mar 28 '18 at 15:36

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

Shiny + CSS: Aligning actionButtons in shinydashboard sidebar

2 Answers2