Set bsButton position in shiny dashboard

Question

I have a basic shiny dashboard below and I would like to know if I can a little bit left or right the bs button "show/hide sidebar".

#ui.r
library(shinydashboard)
library(shiny)
library(shinyBS)
dashboardPage(
  dashboardHeader(),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    tabsetPanel(
      id = 'testingDPEtab',
      tabPanel("Upload",
               bsButton("showpanel8", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
               dashboardPage(
                 dashboardHeader(),
                 dashboardSidebar(),
                 dashboardBody())

    )
  )
))
#server.r
server <- function(input, output) { }

only the button or also the upload button and the blue area below? — Tonio Liebrand, May 21 '19 at 19:19
the button. I think that the "blue area" is the sidebar and cannot be moved if Im not mistaken — firmo23, May 21 '19 at 19:31
I want a button with that name that will place a big red X over stuff I click. — IRTFM, May 21 '19 at 21:03

Tonio Liebrand · Accepted Answer · 2019-05-21T19:45:56.243

Depending on whether you want to apply the "moving" to a specific button or for all these buttons you can do:

tags$head(
  tags$style(HTML('#showpanel8{margin-left:10px}'))
)

Here, the button is referenced by id. So the change will only apply to that button. #showpanel8{margin-left:10px} is CSS syntax to style the button. For other margins you can use:

margin-top
margin-right
margin-bottom
margin-left

See here: https://www.w3schools.com/css/css_margin.asp.

Full reproducible example:

library(shinydashboard)
library(shiny)
library(shinyBS)
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    tags$head(
      tags$style(HTML('#showpanel8{margin-left:10px}'))
    ),
    tabsetPanel(
      id = 'testingDPEtab',
      tabPanel("Upload",
               bsButton("showpanel8", "Show/Hide sidebar",
                        icon = icon("toggle-off"), type = "toggle",
                        style = "info", value = TRUE),
               dashboardPage(
                 dashboardHeader(),
                 dashboardSidebar(),
                 dashboardBody())

      )
    )
))
#server.r
server <- function(input, output) { }

shinyApp(ui, server)

Set bsButton position in shiny dashboard

1 Answers1