在 shiny 应用程序中无法正确单击堆叠的 numericInput 小部件

Question

我有这个最小的例子：

library(shiny)

ui <- fluidPage(
  tags$style("#a {font-size:30px;height:30px;}"),
  tags$style("#b {font-size:30px;height:30px;}"),
  tags$style("#c {font-size:30px;height:30px;}"),

  tags$style("#a1 {font-size:30px;height:30px;}"),
  tags$style("#b1 {font-size:30px;height:30px;}"),
  tags$style("#c1 {font-size:30px;height:30px;}"),

  numericInput("a1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("b1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("c1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  div(style="position: relative;left: 650px; top: 190px;",
      numericInput("a", "", value = 0, min=0, max=3, step=1, width = "100px")
  ),

  div(style="align: center; position: relative;left: 650px; top: 155px;",
      numericInput("b", "", value = 0, min=0, max=3, step=1, width = "100px")
  ),
  div(style="align: center; position: relative;left: 650px; top: 120px;",
      numericInput("c", "", value = 0, min=0, max=3, step=1, width = "100px")
  ),
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

当我尝试单击堆叠字段（此处位于右侧）时，并非所有单击都有效。 所以我最多需要点击五次才能进入该领域。

此行为不会发生在未堆叠的字段中（在左侧）。 所以我认为有一个重叠区域导致了这一点。

但我必须保留输入字段的堆叠形式。

我们怎样才能克服这种行为？

Answer 1

这里的问题是包含numerciInputs的divs的高度高于 30px，因此它们会相互覆盖并阻止您单击。

我将所有numericInputs放在一个 div“容器”中，并为它们应用了 30px 的高度。 您可以通过更改margin-bottom属性来调整它们之间的空间。

请注意，根据您在最终应用程序中想要的结果，必须存在更漂亮的解决方案，但我尽量保持最接近您的原始代码。

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      #container > .form-group {
        height: 30px; 
        margin-bottom: 5px;
        font-size:30px
      }"))
    ),
  
  tags$style("#a {font-size:30px;}"),
  tags$style("#b {font-size:30px;}"),
  tags$style("#c {font-size:30px;}"),
  
  tags$style("#a1 {font-size:30px;height:30px;}"),
  tags$style("#b1 {font-size:30px;height:30px;}"),
  tags$style("#c1 {font-size:30px;height:30px;}"),
  
  numericInput("a1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("b1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("c1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  div(id = "container",
      style="position: relative;left: 650px; top: 190px; ",
      numericInput("a", "", value = 0, min=0, max=3, step=1, width = "100px"),
      numericInput("b", "", value = 0, min=0, max=3, step=1, width = "100px"),
      numericInput("c", "", value = 0, min=0, max=3, step=1, width = "100px")
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)