CODEWITHSUNDEEP
cssrshiny
Basel.D
Basel.D

Reputation: 349

css styling for select and numeric Input

I am using R shiny and i am trying to set the same heigth for selectInput and numericInput in my ui. I found this line:

 tags$style(type="text/css", ".selectize-input {line-height: 20px;}"),

which changes the heigth for all my selectInputs.

Is there any similar line to numericInput?

Thanks

Upvotes: 5

Views: 1730

Answers (1)

kluu
kluu

Reputation: 2995

Well, it does not have a specific class such as selectInput. But you can still get the same result using the more general class form-control. We need to use height instead of line-height though, which will work fine for selectInput anyway.

ui <- fluidPage(
  tags$style(type = "text/css", ".form-control.shiny-bound-input, 
.selectize-input {height: 70px;}"),
  selectInput(inputId = "another_id",
              label = "bar",
              choices = c(1, 2)),
  numericInput(inputId = "some_id",
              label = "foo",
              value = 1)
)

server <- function(input, output, session) {}

shinyApp(ui, server)

EDIT:

In case you want to apply some CSS to a specific input, you need to use its id, so the style does not apply to all elements sharing the same class. In the example above, if you only want to change the height of the numericInput whose id is some_id, you would use #some_id to select this element, leading to the following code:

tags$style(type = "text/css", 
           "#some_id.form-control.shiny-bound-input {height: 70px;}")

Upvotes: 6

Related Questions