Shiny well height change

Question

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

... but it annoys me all the extra gray space above and under real control! I would like to remove this unnecessary space. My series is 50% higher than it should be, and I'm not sure why / how Brilliant rated it that way.

Anyone who has css / html / Shiny skills can point me in the right direction how to change this? My attempts so far have not been successful.

Here is 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 change the filling:

 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 are trying to use spans when adding columns really what you need - try the following:

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