Stacked numericInput widgets not clickable properly in a shiny app

Question

I have this minimal example:

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)

When I try to click on the stacked fields (here on the right side) not all clicks work. So I have to click up to five times to get into the field.

This behavior does not occur in the not stacked fields (on the left side). So I think there is an overlapping area that causes this.

But I have to keep the stacked form of the input fields.

How can we overcome this behavior?

Answer 1

The problem here is that the divs containing the numerciInputs have a height higher than 30px, so they are overriding each other and preventing you from clicking.

I put all the numericInputs in one div "container" and applied a height of 30px for them. You can adjust the space between them by changing the margin-bottom property.

Please note that there must exist more beautiful solutions depending on what result you want in your final app, but I tried so stay the closest to your original code.

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)