將 shiny 小部件 header 與 shiny 應用程序中的輸入放在同一行

Question

我試圖將 shiny 小部件的 header 放在它旁邊，就像在這個答案中一樣，但不幸的是它不起作用並且看不到任何變化。 還有其他人面臨同樣的問題嗎？

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;
}