How to put a box and its label in the same row? (shiny package)

Question

In Shiny, say i am using textInput, the field/box is always shown underneath the label. Is there a way that I can force them to be in the same row?

ie, Label: BOX

instead of

Label:

Box

Answer 1

This is a very old question but thought answering it might be useful for someone who stumbles across this.

Adding this css helps to achieve label next to the inputs

tags$head(
      tags$style(type="text/css", "label{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
    )

Here is an example app:

library(shiny)

ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "label{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
    ),

    textInput(inputId = "txtInp", label = "Label:"),
    numericInput(inputId = "numInp", label = "Label:", value = 0)
  )
)

server <- function(input, output){}


shinyApp(ui, server)

The output of the app is as follows:

EDIT: To address the @fiftace's comments of applying it only to a single input I have wrapped the input in a div with an id and modified the css to be applied to only that ID as follows:

library(shiny)

ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "#inline label{ display: table-cell; text-align: center; vertical-align: middle; } 
                #inline .form-group { display: table-row;}")
    ),

    tags$div(id = "inline", textInput(inputId = "txtInp", label = "Label:")),
    numericInput(inputId = "numInp", label = "Label:", value = 0)
  )
)

server <- function(input, output){}


shinyApp(ui, server)

With this your output looks as follows:

Answer 2

Take at the look at the HTML output from fileInput, e.g.

fileInput("myfile", "Normal Label") 

The HTML it generates is:

<label>Normal Label</label>
<input id="myfile" type="file"/>
<div id="myfile_progress" class="progress progress-striped active shiny-file-input-progress">
  <div class="bar"></div>
  <label></label>
</div>

The label element has a line break by default. You need to change the CSS to get rid of that, i.e. you need to add something like

shinyUI(bootstrapPage(
  tags$head(    
    tags$style("label {display:inline;}")
  ),
  fileInput("myfile", "Inline Label")
))

This will of course effect all label elements, not just this one. If you only want to modify this one you need to include the HTML code directly in your app. You can do this by using the HTML function (note the additional CSS statement).

shinyUI(bootstrapPage(
  HTML('
  <label style="display: inline;">Inline Label</label>
    <input id="myfile" type="file"/>
    <div id="myfile_progress" class="progress progress-striped active shiny-file-input-progress">
    <div class="bar"></div>
    <label></label>
    </div>
')
))