css - Label next to selectInput in shiny

Question

I've got a shiny application like this:

server.R:

    library(shiny)

    function(input, output) { NULL }

and ui.R:

    library(shiny)  


    pageWithSidebar( 

       headerPanel("side-by-side"), 

     fluidRow(

        column(2),
        column(4,
           wellPanel(
               selectInput(inputId = "options", label = "some text", 
                           choices = list(a = 0, b = 1)))   
           )
      ),

      fluidRow( 
         h3("bla bla")
     )
    )

And I would like to have the label of selectInput next to it, not above. Do you know how to do it?

I've found this: Positioning Shiny widgets beside their headers but it doesn't work for me.

Answer 1

There's multiple ways of doing this, here's one:

library(shiny)

server <- shinyServer(function(input, output) { NULL })
ui <- shinyUI(
  pageWithSidebar( 

    headerPanel("side-by-side"), 

    sidebarPanel(
    fluidRow(
      tags$head(
        tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
      ),
      column(2),
      column(4,
               selectInput(inputId = "options", label = "some text", 
                           choices = list(a = 0, b = 1))
      )
    )),
    mainPanel(
    fluidRow( 
      h3("bla bla")
    ))
  )
)

shinyApp(ui=ui,server=server)

If you don't want to mess with shinys default CSS you can just leave the label empty and create a label next to it instead of forcing the existing label to the side.