How do I eliminate stubborn white space between fluidRows in Shiny?

Question

I have two fluidRows in a column of my UI in Shiny.

I want the top row to have a slight space above it, but I want to eliminate any space between the rows.

• I've tried div, tags, and an assortment of style arguments like margin: 0px and padding: 0px ..., but I can't get the spacing to act accordingly.

  • Here's an example:

    ui <- fluidPage(
    fluidRow(
    column(1,offset=0,
           div(style = "font-size: 10px; padding: 14px 0px; margin:0%",
               fluidRow(
                 sliderInput(inputId = "sizeSlide", label = "Sizing", value = 10, min = 1,max = 20)
               )
           ),
           div(style = "font-size: 10px; padding: 0px 0px; margin:0px", 
               fluidRow(
                 radioButtons(inputId = "greatORless", label = "DBH Limiter", choices = c(">", "<"), selected = ">")
               )                                      
           )
        )
      )
    )
    

What I get is this:

^{(Notice the large [unwanted] space between rows)}

What I want is this:

^{(Notice the significantly smaller space between rows)}

How do I do this??

Answer 1

You can use negative values on margin, in this case use margin-top:-2em to affect only the top margin. I prefer to use relative units, but you can use pixel instead of em.

library(shiny)
ui <- fluidPage(
fluidRow(
column(1, offset = 0,
       div(style = "font-size: 10px;
                   padding: 14px 0px;
                   margin:0%",
           fluidRow(
             sliderInput(inputId = "sizeSlide",
                         label = "Sizing",
                         value = 10,
                         min = 1,
                         max = 20)
           )
       ),
       div(style = "font-size: 10px;
                   padding: 0px 0px;
                   margin-top:-2em", 
           fluidRow(
             radioButtons(inputId = "greatORless",
                          label = "DBH Limiter",
                          choices = c(">", "<"),
                          selected = ">")
           )                                      
       )
    )
  )
)

shinyApp(ui = ui, server = server)