css 堆叠的numericInput小部件在闪亮的应用程序中无法正确点击

alen0pnh 于 2022-11-26 发布在其他

关注(0)|答案(1)|浏览(119)

我有一个最小的例子：

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)

当我尝试点击堆叠字段（在右侧）时，并非所有的点击都有效。所以我必须点击多达五次才能进入该字段。
这种行为不会发生在未堆叠的字段（在左侧）。所以我认为有一个重叠的区域导致了这种情况。
但是我必须保持输入字段的堆叠形式。

我们如何克服这种行为？

css

来源：https://stackoverflow.com/questions/74557485/stacked-numericinput-widgets-not-clickable-properly-in-a-shiny-app

1条答案

按热度按时间

q8l4jmvw1#

这里的问题是，包含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)

赞(0）回复(0）举报 2022-11-26

我来回答

css 堆叠的numericInput小部件在闪亮的应用程序中无法正确点击

1条答案

相关问题

热门标签

最新问答