How to reduce space between label and choices in selectinput?

Question

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)

`div(tags$style(".shiny-input-container {height : 12px}"),[...]` may bring you a step closer to your goal. I'm not 100% sure on how to target the elements you want, so you might play around with changing `.shiny-input-container`. — alex_555, Sep 05 '19 at 07:42

score 5 · Accepted Answer · answered Sep 11 '19 at 10:09

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)

score 0 · Answer 2 · answered Sep 05 '19 at 15:27

0

Here is the link about Shiny - change the size (padding?) of dropdown menu (select tags) smaller

answered Sep 05 '19 at 15:27

raytong

41
3

1

Answers like this should be posted as a comment. – Stéphane Laurent Sep 11 '19 at 10:10

How to reduce space between label and choices in selectinput?

2 Answers2