Increase distance between side-label and shiny widget in shiny dashboard

Viewed 230

How can I increase the distance between label and input in a shiny dashboard?

library(shiny)

ui <- shinyUI(
  pageWithSidebar( 
    
    headerPanel("side-by-side"), 
    
    sidebarPanel(
      fluidRow(
        tags$head(
          tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
        ),
        column(2),
        column(4,
               selectInput(inputId = "options", label = "some text", 
                           choices = list(a = 0, b = 1))
        )
      )),
    mainPanel(
      fluidRow( 
        h3("bla bla")
      ))
  )
)
server <- shinyServer(function(input, output) { NULL })
shinyApp(ui = ui, server = server)
1 Answers

Try adding this line before selectInput and make sure to add additional bracket after selectInput to close tags$div.

tags$div(id = "div_test", tags$style("#div_test div {margin-left: 20px}")

So it will be:

column(4,
       tags$div(id = "div_test", tags$style("#div_test div {margin-left: 20px}"),

       selectInput(inputId = "options", label = "some text", 
                   choices = list(a = 0, b = 1))),
)

So basically what this does is that it creates an additional div just before selectIput which we will use to indent to increase spacing between the label and select input.

enter image description here

Related