简体   繁体   中英

Place shiny widget header in the same line with the input in shiny app

Im trying to put the header of the shiny widget next to it like in this answer but unfortunatelly it does not work and see no change. Anybody else facing the same issue?

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

Yes, your code is not working. You can adjust the CSS to make it work. However, you need to play with the numbers (font size, width, etc) as required in your case. Try this

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)

输出

EDIT : add color

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

输出2

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM