janosdivenyi janosdivenyi - 3 months ago 16
R Question

How to make label and box align next to each other in shiny::numericInput?

Is it possible to create a

numericInput()
for shiny where box is next to the label (instead of below it which is the default).

Here is a simple example:



library(shiny)

ui <- shinyUI(fluidPage(

titlePanel("Shiny with lots of numericInput()"),

sidebarLayout(

sidebarPanel(
fluidRow(
column(6, numericInput("a1", label = "A1", value = 1)),
column(6, numericInput("b1", label = "B1", value = 1))
),
fluidRow(
column(6, numericInput("a2", label = "A2", value = 2)),
column(6, numericInput("b2", label = "B2", value = 2))
)
),

mainPanel(
p('something interesting')
)
)
))

server <- function(input, output) {}

shinyApp(ui, server)


This results in 4 lines: first line for the labels "A1" and "B1", second line for the corresponding boxes, etc. It does not help if I try to adjust the
width
parameter of
numericInput()
.

(Unfortunately I do not really know html and css to modify the class of the input widget directly.)

Here is a similar issue. But I can handle the same row with fluidRow(), I want the labels to be in the same row as well.

Answer

Not best but css variant

inline_numericInput=function(ni){
  tags$div( class="form-inline",ni)
}

  ui <- shinyUI(fluidPage(
  tags$head(tags$style("#side_panel{
                       padding-left:10px;
                       }
                       .form-group {
                       margin-bottom: 15px !important;
                       }
                       .form-inline .form-control {
                       width:80%;
                       }

                       ")),

  titlePanel("Shiny with lots of numericInput()"),

  sidebarLayout(

    sidebarPanel(width = 4,id="side_panel",
                 fluidRow(
                   column(6,  inline_numericInput(numericInput("a1", label = "A1", value = 1))),
                   column(6, inline_numericInput(numericInput("b1", label = "B1", value = 1)))
                 ),
                 fluidRow(
                   column(6, inline_numericInput(numericInput("a2", label = "A2", value = 2))),
                   column(6, inline_numericInput(numericInput("b2", label = "B2", value = 2)))
                 )
    ),

    mainPanel(
      p('something interesting')
    )
  )
  ))

server <- function(input, output) {}

shinyApp(ui, server)
Comments