trouble decreasing margin between elements in shiny app

user_2300622 0
Viewed 182

I'm trying to reduce the margin between two elements on this shiny app. When open in a browser, the whitespace between the two is huge.

I tried setting the css by adding style = "margin:0px; padding:0px" to the UI, but it did not help. I also tried messing with the inline = TRUE settings, also no help.


ui <- fluidPage(
  fluidRow(
    column(width = 3,
      htmlOutput("select1", inline = TRUE, style = "margin:0px; padding:0px")
    ),
    column(width = 3,
        htmlOutput("select2", inline = TRUE, style = "margin:0px; padding:0px")
    ),
    column(width = 6)
  )
)

server <- function(input, output, session) {
  output$select1 <- renderUI({
    pickerInput(
        inputId = "select1", 
        label = "LETTERS", 
        #choices = sort(unique(inventory$SubDivision)),
        choices = LETTERS,
        options = list(
            "actions-box" = TRUE, 
            size = 10,
            `live-search`=TRUE
        ), 
        multiple = TRUE
    )
  })
  output$select2 <- renderUI({
    pickerInput(
        inputId = "select2", 
        label = "letters", 
        #choices = sort(unique(inventory$SubDivision)),
        choices = letters,
        options = list(
            "actions-box" = TRUE, 
            size = 10,
            `live-search`=TRUE
        ), 
        multiple = TRUE
    )
  })
}
shinyApp(ui, server)

Whitespace in browser: enter image description here

shiny r
1 Answers

The issue here is not the margin or padding, but the limit of the width to 300px. To allow the control to grow to full size of the column, you can change the global style :

ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$style(HTML("
      .shiny-input-container:not(.shiny-input-container-inline) {
        width:100%;
      }"))
    ),
    column(width = 3,
           htmlOutput("select1", inline = TRUE)
    ),
    column(width = 3,
           htmlOutput("select2", inline = TRUE)
    ),
    column(width = 6)
  )
)
user_50381070
Related