Search code examples
htmlcssrshinywhitespace

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


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:

enter image description here (Notice the large [unwanted] space between rows)

What I want is this:

enter image description here (Notice the significantly smaller space between rows)

How do I do this??


Solution

  • 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)