如何调整shinyWidgets中pickerInput的高度？多种CSS方案尝试未果

Great job narrowing down the initial CSS selector issue—you were close! The remaining bottom blank space comes from a default margin applied to the form container that wraps the pickerInput in Shiny. Let's address both the button height and that extra spacing with a complete CSS solution.

Step 1: Full CSS Fix #

Add this style block to your UI to target all the relevant elements:

tags$style(HTML("
  /* Adjust button height, font size, and internal padding */
  .choosechannel .btn {
    height: 26.5px;
    min-height: 26.5px;
    font-size: 13px;
    padding: 0 10px; /* Optional tweak to fit text horizontally */
  }
  
  /* Remove default bottom margin from the form group wrapper */
  .choosechannel .form-group {
    margin-bottom: 0;
  }
  
  /* Ensure the dropdown trigger doesn't add extra vertical padding */
  .choosechannel .dropdown-toggle {
    padding-top: 0;
    padding-bottom: 0;
  }
"))

Step 2: Full Working Example #

Here's how to integrate this with your original code for a testable app:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # Add the fixed CSS here
  tags$style(HTML("
    .choosechannel .btn {
      height: 26.5px;
      min-height: 26.5px;
      font-size: 13px;
      padding: 0 10px;
    }
    
    .choosechannel .form-group {
      margin-bottom: 0;
    }
    
    .choosechannel .dropdown-toggle {
      padding-top: 0;
      padding-bottom: 0;
    }
  ")),
  
  # Your original pickerInput wrapped in the .choosechannel div
  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) {
  # Server logic goes here
}

shinyApp(ui, server)

Why This Works #

Let's break down the selector choices:

• .choosechannel .btn: Targets the actual pickerInput button directly, enforcing your desired height and font size (this builds on the working selector you already found, with a small padding adjustment to fit text neatly).
• .choosechannel .form-group: Shiny automatically wraps input elements in a .form-group div, which has a default margin-bottom: 1rem—removing this eliminates the unwanted blank space below the picker.
• .choosechannel .dropdown-toggle: The picker button doubles as a dropdown trigger, and this ensures its internal vertical padding doesn't push the button height beyond your set value.

内容的提问来源于stack exchange，提问作者matchbox13