在 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)