将闪亮的小部件标题与闪亮应用中的输入放在同一行

Question

我试图将闪亮小部件的标题放在它旁边，就像在这个 answer 中一样，但不幸的是它不起作用并且看不到任何变化。还有其他人面临同样的问题吗？

library(shiny)  

runApp(list(ui = pageWithSidebar( 
  headerPanel("side-by-side"), 
  sidebarPanel(
    tags$head(
      tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: inline-block!important; }")
    ),
    selectInput(inputId = "options", label = "dropdown dox:", 
                choices = list(a = 0, b = 1))
  ),
  mainPanel( 
    h3("bla bla")
  )
)
, server = function(input, output) { NULL })
)

Answer 1

是的，您的代码不起作用。您可以调整 CSS 以使其正常工作。但是，您需要根据您的情况使用数字（字体大小、宽度等）。试试这个

library(shiny)

css <- 
  "
.container {
margin: 20px;
padding: 15px;
}
#expr-container .selectize-input {
  font-size: 44px;
line-height: 44px;
width: 300px;
}
#expr-container .selectize-dropdown {
font-size: 16px;
line-height: 22px;
}
#expr-container .selectize-dropdown-content {
max-height: 225px;
padding: 0;
}
#expr-container .selectize-dropdown-content .option {
border-bottom: 1px dotted #ccc;
}
#expr-container label{ 
display: table-cell; 
text-align: center; 
vertical-align: middle;  
}
#expr-container .form-group { 
display: table-row; 
}
"

ui <- fluidPage(
  headerPanel("side-by-side"),
  sidebarPanel(
    tags$style(css),
    fluidRow(
      
      tags$div(id = "expr-container", selectInput(inputId = "options", label = "Select Me: ", 
                                          choices = list(aaaaaa = 0, bbbbbb = 1), 
                                          multiple = FALSE, selectize = TRUE #, width = "60%"
                                          ) )
      
    )
  ),
  mainPanel(
    h3("bla bla")
  )
)

server <- function(input, output){}

shinyApp(ui, server)

编辑：添加颜色

#expr-container .selectize-input {
  font-size: 44px;
line-height: 44px;
color: blue;
border-color: red;
width: 300px;
}