Overlap image and textOutput - shiny

shiny
, ,
2 
library(shiny)

# Define UI
ui <- fluidPage(

  # Application title
  titlePanel("Count"),

  # Sidebar
  sidebarLayout(
    sidebarPanel(
      textInput("txt", "Enter the text to display below:",
        value = 52
      )
    ),
    # Show an image with a counter
    mainPanel(
      fluidRow(
        column(
          12,
          div(
            style = "
                   margin-left:36%;
                    display: inline-block;
                    position: absolute;
                ",
            img(
              src = "https://forum.posit.co/uploads/default/original/3X/5/1/51436f1a309c3aaeb71f5f580182029f2733a301.jpeg",
              height = 100,
              width = 100,
              style = "  position: relative;"
            ),
            span(textOutput("default"),
              style = "
              color: orange;
                 position: relative;
                     top: -80px;
                    right: -40px;"
            )
          )
        )
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
  output$default <- renderText({
    input$txt
  })
}

# Run the application
shinyApp(ui = ui, server = server)
2 Likes