Center form below table in R Shiny

Question

I wish to center a small form below a table that is also centered. I center the table using, fluidRow and column like so:

fluidRow(
    column(12, align="center", reactableOutput("table")),
  ),

If I do the same with the form, each component of the form becomes centered in the page which is wrong. How do I center a correct looking form beneath the centered table?

Example Code

library(shiny)
library(reactable)

ui <- fluidPage(
  fluidRow(
    column(12, align="center", reactableOutput("table")),
  ),
  fluidRow(  
    column(12, 
           div(id = "form", 
               textInput("email", "Email", width = "250px", placeholder = "joe@example.com"),
               radioButtons(inputId = "pref", 
                            label ="Here's a label:",
                            choiceNames = list(
                              "First choice", 
                              "Second choice"),
                            choiceValues = list(
                              "v1", "v2"
                            )),
               actionButton("submit", "Enter", class = "btn-primary", width = 250, 
                            style="color: #FFF; background-color: #132EBA;"),
             
            )
    )
  )
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              fullWidth = FALSE)
  })
  
  observeEvent(input$submit, {
    # Do something!
  })
}

shinyApp(ui, server)

score 1 · Accepted Answer · answered Nov 25 '20 at 07:46

You need to create 2 div elements and give them CSS properties :

first one is centered
second one is an inline-block and aligned left

Source : CSS: Center block, but align contents to the left

So it gives

library(shiny)
library(reactable)

ui <- fluidPage(
  fluidRow(
    column(12, align="center", reactableOutput("table")),
  ),
  fluidRow(  
    column(12, 
           div(id = "form", 
               style = "text-align: center;",
               div(
                 id = "form_content",
                 style = "display:inline-block; text-align: left;",
                 textInput("email", "Email", width = "250px", placeholder = "joe@example.com"),
                 radioButtons(inputId = "pref", 
                              label ="Here's a label:",
                              choiceNames = list(
                                "First choice", 
                                "Second choice"),
                              choiceValues = list(
                                "v1", "v2"
                              )),
                 actionButton("submit", "Enter", class = "btn-primary", width = 250, 
                              style="color: #FFF; background-color: #132EBA;")
               )
           )
    )
  )
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              fullWidth = FALSE)
  })
  
  observeEvent(input$submit, {
    # Do something!
  })
}
shinyApp(ui, server)

Center form below table in R Shiny

1 Answers1