Geek Answers Handbook

How to make shortcut and field aligned next to each other in brilliant :: numericInput?

Is it possible to create numericInput() for brilliant where the field is next to the label (and not below it by 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: the first line for the labels "A1" and "B1", the second line for the corresponding fields, etc. This does not help if I try to adjust the width numericInput() parameter.

(Unfortunately, I really don't know html and css to directly modify the class of the input widget.)

Here is a similar problem. But I can handle the same line with fluidRow (), I want the labels to be on the same line.

+5
source share
3 answers

Good question, which also applies to other controls. I feel your pain. The solution below is what I use, but not perfect. It would be better if this could be set as a brilliant parameter in the control. An HTML / CSS solution will most likely also look better.

  library(shiny) ui <- shinyUI(fluidPage( titlePanel("Shiny with lots of numericInput()"), sidebarLayout( sidebarPanel( fluidRow( column(2, HTML('<b>A1</b>')), column(4, numericInput("a1", label = NULL, value = 1)), column(2, HTML('<b>B1</b>')), column(4, numericInput("b1", label = NULL, value = 1)) ), fluidRow( column(2, HTML('<b>A2</b>')), column(4, numericInput("a2", label = NULL, value = 1)), column(2, HTML('<b>B2</b>')), column(4, numericInput("b2", label = NULL, value = 1)) ) ), mainPanel( p('something interesting') ) ))) server <- function(input, output) { } shinyApp(ui, server)
+3
source

Not the best css option

 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)
+1
source

Another solution with div

 div(style="display: inline-block;vertical-align:top;",h5("label1:"), selected='mean'), div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput1", label = NULL, value = 20, min = 1)),

Managed Code:

 library(shiny) ui <- shinyUI(fluidPage(titlePanel("Shiny with lots of numericInput()"), sidebarLayout( sidebarPanel( fluidRow( div(style="display: inline-block;vertical-align:top;",h5("label1:"), selected='mean'), div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput1", label = NULL, value = 20, min = 1)), br(), div(style="display: inline-block;vertical-align:top;",h5("label2:"), selected='mean'), div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput2", label = NULL, value = 20, min = 1)) ) ), mainPanel( p('something interesting') ) ))) server <- function(input, output) { } shinyApp(ui, server)
0
source

More articles:


All Articles