4

I use pickerInput from shinyWidget 

div(class = "choosechannel",
pickerInput(inputId = "choosechannel", label = "business channel", width = "150px",
choices = c("In-Branch", "Agency", "Affinity", "Corporate", "Credit Life"),
multiple = TRUE, selected = c("In-Branch", "Agency", "Affinity", "Corporate", "Credit Life"),
options = list(height = 10)))

I want to change the height of pickerInput Here are the codes that I have tried to use:

tags$style(".choosechannel-button {height: 26.5px; min-height: 26.5px; padding: 0px;}")

tags$head( tags$style( HTML("#choosechannel-button {font-size: 13px; height: 26.5px; min-height: 26.5px;}")))

tags$style(".choosechannel-container {height: 26.5px; min-height: 26.5px; padding: 0px;}")

tags$head( tags$style( HTML("#choosechannel-container {font-size: 13px; height: 26.5px; min-height: 26.5px;}")))

None of them works. Does anyone know how to do it?

edit : I've tried .choosechannel .btn {height: 26.5px; font-size: 13px;} within tags$style, as suggested by Wilmar van Ommeren in his answer. It almost work. It still has white space underneath it.
It looks like this:
Here

matchbox13
  • 73
  • 13

1 Answers1

3

You are almost there. What you want is to change the .btn class in your .choosechannel class. You can point to a class inherited by another class by using a dot (.choosechannel .btn {...}).

Working example:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$style(".choosechannel .btn {height: 26.5px; min-height: 26.5px; padding: 0px;}"),
  div(class = "choosechannel",
      pickerInput(inputId = "choosechannel", label = "business channel", width = "150px",
                  choices = c("In-Branch", "Agency", "Affinity", "Corporate", "Credit Life"),
                  multiple = TRUE, selected = c("In-Branch", "Agency", "Affinity", "Corporate", "Credit Life"),
                  options = list(height = 10))) 
)

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

}

shinyApp(ui, server)
Wilmar van Ommeren
  • 7,469
  • 6
  • 34
  • 65
  • I've tried your code and it almost work. There's still white space underneath the button. I've provided the picture in my edited question. Please review. Thank you. – matchbox13 Dec 11 '19 at 05:58
  • That's not the case on my pc. Does this occur if you copy and run my exact piece of code? If not you should post a minimal reproducible example, so I can help you further. – Wilmar van Ommeren Dec 11 '19 at 06:55
  • Yes, I tried your exact whole code on a new empty shiny web app. I added "body{background-color: #00008B}" in tags$style to add background and it gives me the same result as the problem I wrote above; that there's white space underneath the button. – matchbox13 Dec 12 '19 at 01:35