Shiny: Label position, textInput

Question

Lets assume I have a very simple application that only has 8 inputs grouped in 2 Panels (4 inputs | 4 inputs - see picture bellow) and based on these, I plot a small plot (easy peasy).

The problem that I face is that I want to have the labels only for the first panel, and on the left of the textInput box.

e.g. (Please excuse my sloppy image editing!)

Any suggestion?

My MWE for Figure 1 output:

library(shiny)
ui<-shinyUI(fluidPage(
  wellPanel(
    tags$style(type="text/css", '#leftPanel { max-width:300px; float:left;}'),
    id = "leftPanel",
    textInput("Population1000", 'Population 1000',"15"),
    textInput("Area1000",'Area  1000', "20"),
    textInput("GNI1000", 'GNI 1000', "2314"),
    textInput("GDP1000", "GDP 1000", "1000")
  ),
  wellPanel(
    tags$style(type="text/css", '#RightPanel { max-width:300px; float:left;}'),
    id = "RightPanel",
    textInput("Population2000", 'Population 2000',"15"),
    textInput("Area2000",'Area 2000', "20"),
    textInput("GNI2000", 'GNI 2000', "2314"),
    textInput("GDP2000", "GDP 2000", "1000")
  )
)
)
server<-shinyServer(function(input, output) {NULL})
shinyApp(ui,server)

Answer 1

Hi you can try to use Bootstrap's horizontal form, look at the code below, it create 3 columns of width 4 each. You can change width in class = "col-sm-4 control-label" for labels, and in width = 4 for inputs.

library("shiny")
ui <- fluidPage(

  fluidRow(
    column(

      width = 4,

      tags$form(
        class="form-horizontal",

        tags$div(
          class="form-group",
          tags$label(class = "col-sm-4 control-label", `for` = "Population1000", br(), "Population"),
          column(width = 4, textInput(inputId = "Population1000", label = "Year 1000", value = "15")),
          column(width = 4, textInput(inputId = "Population2000", label = "Year 2000", value = "15"))
        ),

        tags$div(
          class="form-group",
          tags$label(class = "col-sm-4 control-label", `for` = "Area1000", "Area"),
          column(width = 4, textInput(inputId = "Area1000", label = NULL, value = "20")),
          column(width = 4, textInput(inputId = "Area2000", label = NULL, value = "20"))
        ),

        "..."

      )
    )
  )

)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Result :

PS : you should not use same ids for inputs.