CODEWITHSUNDEEP
rshiny
JD002
JD002

Reputation: 113

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

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

Upvotes: 8

Views: 9609

Answers (2)

SBista
SBista

Reputation: 7694

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:

enter image description here

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:

enter image description here

Upvotes: 20

Mark Heckmann
Mark Heckmann

Reputation: 11431

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

Upvotes: 4

Related Questions