How to reduce height of input fields in Shiny? - css

Question

I have multiple input fields in my shinyApp (fileInput, numericInput, textInput), and I would like to customize their height, as well as the character size.
I have tried with div(), but I could only change the gap between two fields. In this case setting div(style="height: 60px;",numericInput("rat","RATIO", value = 0,step=0.01 , width = '40%')) would only decrease the distance between the numeric input field and the slider.
Here is an example code:
sidebar <- dashboardSidebar(
sidebarMenu(
div(style="height: 70px;",fileInput('uploadfile',"Select result file(s)", multiple=TRUE,accep=".txt")),
div(style="height: 60px;",numericInput("rat","RATIO", value = 0,step=0.01 , width = '40%')),
div(style="height: 60px;",sliderInput("ratio",NULL, min= 0, max= 1, value = 0)),
textInput("mytext","Enter name",value='', width = '50%')
)
)
ui<-dashboardPage(
dashboardHeader(title = "Analysis"),
sidebar,
body <- dashboardBody()
)
server<-shinyServer(function(input, output, session){})
shinyApp(ui = ui, server = server)
I have never done any html, so I am not sure what should I look for exactly.

Answer 1

There are several ways of doing that using CSS.
You can either change all inputs that have the same CSS class. Then all inputs of same type would be styled the same way. Or you use the knowledge that you know the id of the ui elements. For me it sounds like that latter is more interesting for you as it seems you want to do specific styling for each of the inputs.
Within shiny you can overwrite existing CSS with the tags$style() command. You can use the format #id{property: value}. So for the inputfile with the id uploadfile, you could use: #uploadfile{height: 70px}. (Note that if you are interested in adapting classes you would use .className{property: value}
Reproducible example:
sidebar <- dashboardSidebar(
sidebarMenu(
tags$head(
tags$style(
HTML('
#uploadfile{height: 70px}
#rat{height: 60px}
#ratio{height: 60px}
#mytext{width: 50px}
')
)
),
fileInput('uploadfile',"Select result file(s)", multiple=TRUE,accep=".txt"),
numericInput("rat","RATIO", value = 0,step=0.01 , width = '40%'),
sliderInput("ratio",NULL, min= 0, max= 1, value = 0),
textInput("mytext","Enter name",value='', width = '50%')
)
)
ui<-dashboardPage(
dashboardHeader(title = "Analysis"),
sidebar,
body <- dashboardBody()
)
server<-shinyServer(function(input, output, session){})
shinyApp(ui = ui, server = server)