I would like to remove/reduce the space between the label and selection options for a selectinput in Shiny. I would also like to reduce the space between two different selectinputs.
I have tried to wrap the selectinputs in a div style and set margin and padding to 0. This has no effect, but I may be doing it wrong. See code below.
ui <- fluidPage(
theme = shinytheme("sandstone"),
sidebarLayout(
sidebarPanel(
div(style = "font-size:12px; margin: 0px; padding: 0px",
selectInput(
"select1",
label = h5("Selection 1"),
choices = c("a", "b", "c"),
selectize = TRUE
),
selectInput(
"select2",
label = h5("Selection 2"),
choices = c("a", "b", "c"),
selectize = TRUE
)
)
),
mainPanel(
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
To reduce the space between the label and the dropdown list, use this CSS:
.shiny-input-container > label {margin-bottom: -15px;}
To reduce the space between the two select inputs, you can insert a div
between them styled with a negative margin-top
.
library(shiny)
library(shinythemes)
css <- "
.shiny-input-container > label {margin-bottom: -15px;}"
ui <- fluidPage(
theme = shinytheme("sandstone"),
tags$head(
tags$style(HTML(css))
),
sidebarLayout(
sidebarPanel(
selectInput(
"select1",
label = h5("Selection 1"),
choices = c("a", "b", "c"),
selectize = TRUE
),
div(style = "margin-top:-15px"),
selectInput(
"select2",
label = h5("Selection 2"),
choices = c("a", "b", "c"),
selectize = TRUE
)
),
mainPanel(
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)