Is it possible to create a numericInput()
for shiny where box is next to the label (instead of below it which is the default).
是否可以为闪亮创建一个numericInput(),其中框位于标签旁边(而不是默认值下方)。
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()
.
这导致4行:标签“A1”和“B1”的第一行,相应框的第二行等。如果我尝试调整numericInput()的宽度参数,则无效。
(Unfortunately I do not really know html and css to modify the class of the input widget directly.)
(不幸的是我真的不知道html和css直接修改输入小部件的类。)
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.
这是一个类似的问题。但我可以使用fluidRow()处理相同的行,我希望标签也在同一行。
3 个解决方案
#1
3
Good question, that is also relevant to other controls. I feel your pain. The solution below is what I use, but is not ideal. It would be better if this could be set as a shiny parameter in the control. An HTML/CSS solution will most likely also look better.
好问题,这也与其他控制有关。我感觉到你的痛苦。以下解决方案是我使用的,但并不理想。如果可以将其设置为控件中的闪亮参数,那会更好。 HTML / CSS解决方案很可能看起来更好。
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)
#2
1
Not best but css variant
不是最好的,但css变种
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)
#3
0
Another solution with div
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)),
Runnable 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)
#1
3
Good question, that is also relevant to other controls. I feel your pain. The solution below is what I use, but is not ideal. It would be better if this could be set as a shiny parameter in the control. An HTML/CSS solution will most likely also look better.
好问题,这也与其他控制有关。我感觉到你的痛苦。以下解决方案是我使用的,但并不理想。如果可以将其设置为控件中的闪亮参数,那会更好。 HTML / CSS解决方案很可能看起来更好。
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)
#2
1
Not best but css variant
不是最好的,但css变种
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)
#3
0
Another solution with div
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)),
Runnable 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)