How to position a textInput widget on certain position in a shiny app with a background picture

Question

I have this example app:

library(shiny)

ui <- fluidPage( 
  textInput("a", "A", width = 20),
  textInput("b", "B", width = 20),
  tags$img(
    src = "https://posit.co/wp-content/uploads/2022/10/09_HOMEPAGE.svg",
 style = 'position: absolute'
  )
)
server <- function(input, output, session) { 
}
shinyApp(ui, server)

Which creates this:

How can I position the textInput widgets like this way:

Answer 1

You can change the order to have the image first with static sizing then embed the input in a div with absolute position:

ui <- fluidPage( 
  tags$img(
    src = "https://posit.co/wp-content/uploads/2022/10/09_HOMEPAGE.svg",
    style = 'position: absolute; width: 1024px; height: 768px;'
  ),
  tags$div( 
    textInput("a", "A", width = 20),
    style = 'position: absolute;left: 420px; top: 100px;'),
)