Please find the screenshot and reprex below
Let's keep the font as it is adoped but can we vary the drop-down box ? height and weight as indicated in the screenshot ?
How can we customize the height and width of the select Input ?
library(shiny)
shinyApp(
ui = fluidPage(tags$style(type='text/css', ".selectize-input { font-size: 13px; line-height: 13px;}
.selectize-dropdown { font-size: 13px; line-height: 13px; }
.form-group, .selectize-control {margin-bottom:-10px;max-height: 100px !important;}
.box-body {
padding-bottom: 0px;
}"),
selectInput("state", "Choose a state:",
list(`East Coast` = list("NY", "NJ", "CT"),
`West Coast` = list("WA", "OR", "CA"),
`Midwest` = list("MN", "WI", "IA"))
),
textOutput("result")
),
server = function(input, output) {
output$result <- renderText({
paste("You chose", input$state)
})
}
)
Hi,
This is what I came up with:
library(shiny)
shinyApp(
ui = fluidPage(
tags$head(
tags$style(HTML("
.selectize-input {
height: 50px;
width: 600px;
font-size: 24pt;
padding-top: 5px;
}
"))
),
selectInput("state", "Choose a state:",
list(`East Coast` = list("NY", "NJ", "CT"),
`West Coast` = list("WA", "OR", "CA"),
`Midwest` = list("MN", "WI", "IA"))
),
textOutput("result")
),
server = function(input, output) {
output$result <- renderText({
paste("You chose", input$state)
})
}
)
An interesting related post is this one:
This was a fun one! I went ahead and applied custom styling for <select>. Here's what it looks like.
[33%20PM]
The first thing I did was create a new r project and created a separate css file. I originally had it all in one file, but it was starting to become difficult to manage. At the end of this post, you can find a link to the project on github.
ui.R
The two things that I'd like to point out are the label and select elements. In the previous post, I mentioned that using tags$select might be a better option for adding custom styling. The structure to create the input using example provided ended up looking like this.
# label
tags$label("for"="state", "Select a State", class="input-lā¦
Good luck!
PJ
1 Like
system
Closed
August 6, 2019, 11:04am
3
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.