1

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: enter image description here

How can I position the textInput widgets like this way: enter image description here

TarJae
  • 72,363
  • 6
  • 19
  • 66

1 Answers1

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;'),
)
HubertL
  • 19,246
  • 3
  • 32
  • 51
  • This is very helpful. Is it possible to keep the textInput always the same position related to the background picture? Now by changing the window size the textInput moves around. – TarJae Nov 23 '22 at 19:52
  • 1
    FYI - if you resize the browser the input will lose the correct positioning – Jamie Nov 23 '22 at 19:52
  • 1
    @TarJae - you could update the left and top to use percentages instead of pixels but it still doesn't track accurately from my testing. I think you'll need to use JS in order to set the position properly with x,y coords. – Jamie Nov 23 '22 at 19:56
  • Any idea for a source? – TarJae Nov 23 '22 at 19:57
  • 2
    Easier to set the image as not resizable `position: absolute; width: 1024px; height: 768px;` – HubertL Nov 23 '22 at 20:05
  • Could please update your answer with this valuable comment? – TarJae Nov 24 '22 at 05:59