Altering the height of a wellpanel in Shiny

Question

I have a nice wellpanel at the top of my Shiny viz that looks good:

...but I am getting annoyed at all the extra grey space above and below the actual controls! I would like to remove this unnecessary space. My row is a good 50% taller than it needs to be, and I'm not sure why/how Shiny sized it this way.

Does anyone who has skills in css / html / Shiny be able to point me in the right direction, regarding how to modify this? My attempts thus far have been unsuccessful.

Here's the code below:

shinyUI(fluidPage(


  fluidRow(  
    column(12,
           wellPanel(              
             tags$div(class = "row",
                      tags$div(class = "span"),
                      tags$div(class = "span1", h1(numericInput(inputId="num", label="ID", value=NaN))),
                      tags$div(class = "span2", h1(sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1))),
                      tags$div(class = "span1", h1(radioButtons(inputId="gender", "Gender", c("combined" = 0, "male" = 1, "female" = 2), inline=FALSE))),
                      tags$div(class = "span1", h1(textOutput("text")))
             )
           ))),  



  fluidRow(   


    column(4,
           plotOutput("some_plot_not_shown"))

)))

Thanks for reading this far.

Answer 1

You can alter the padding:

library(shiny)
runApp(
  list(ui = fluidPage(           
    wellPanel(              
    tags$div(class = "row",
             tags$div(class = "span"),
             tags$div(class = "span1", h1(numericInput(inputId="num", label="ID", value=NaN))),
             tags$div(class = "span2", h1(sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1))),
             tags$div(class = "span1", h1(radioButtons(inputId="gender", "Gender", c("combined" = 0, "male" = 1, "female" = 2), inline=FALSE))),
             tags$div(class = "span1", h1(textOutput("text")))
    )
  , style = "padding: 5px;")
  , wellPanel(              
    tags$div(class = "row",
             tags$div(class = "span"),
             tags$div(class = "span1", h1(numericInput(inputId="num1", label="ID", value=NaN))),
             tags$div(class = "span2", h1(sliderInput(inputId="age1", "Age Range", min=32, max=99, value=c(32, 99), step=1))),
             tags$div(class = "span1", h1(radioButtons(inputId="gender1", "Gender", c("combined" = 0, "male" = 1, "female" = 2), inline=FALSE))),
             tags$div(class = "span1", h1(textOutput("text1")))
    )
    , style = "padding: 45px;")
  )
       , server = function(input, output, session){

       }
       )
  )

Answer 2

I think you're trying to use spans when adding columns is really what you're after -- try this:

shinyUI(fluidPage(
  fluidRow(
    column(12,
      fluidRow(
        wellPanel(
          fluidRow(
            column(3, h1(numericInput(inputId="num", label="ID", value=NaN))),
            column(3, h1(sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1))),
            column(3, h1(radioButtons(inputId="gender", "Gender", c("combined" = 0, "male" = 1, "female" = 2), inline=FALSE))),
            column(3, h1(textOutput("text")))
          )
        ) # End wellPanel
      )
    )
  ),
  fluidRow(
    column(4, plotOutput("some_plot_not_shown"))
  )
))