Center and outline a div in Shiny

user_13983136 0
Viewed 38

I have the following snippet:

shinyUI(fluidPage(
  useShinyjs(),
  div(
    id = "login",
    align="center",
    textInput("text_login", "Enter your username", ""),
    actionButton("btn_login", "Enter"),
    hidden(verbatimTextOutput("value"))
  ),
  # rest of the code

How can I position this div in the center of the page (both vertically and horizontally) and put it inside a rectangular outline, so that it stands out from the rest of the page?

Thank you in advance for your help.

shiny r
1 Answers

You can use CSS in shiny apps and tags (like div). I found the style here.

library(shinyjs)
library(shiny)

ui <- fluidPage(
  div(
    textInput("text_login", "Enter your username", ""),
    actionButton("btn_login", "Enter",style='margin-bottom:20px;'),
    hidden(verbatimTextOutput("value")),
    style='
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);')
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)
user_81871910
Related