R shiny: center and resize textInput

Question

I am trying to do something (or so I thought) relatively simple. I have a simple shiny page with just a textInput box and an actionButton.

I want them both to appear in the center (vertically and horizontally) of the window.

The way I've started going about it is to use a fluidPage with two fluidRows, one for each element:

library(shiny)
library(shinyapps)

shinyUI(fluidPage(theme = "bootstrap.css",
   fluidRow(
      column(8, align="center", offset = 2,
      textInput("string", label="",value = ""),
      tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center; font-size: 30px;}")
      )
   ),

   fluidRow(
      column(6, align="center", offset = 3,
         actionButton("button",label = textOutput("prediction")),
         tags$style(type='text/css', "#button { vertical-align: middle; height: 50px; width: 100%; font-size: 30px;}")
      )
   )
)
)

I can get the button to appear in the center (horizontally) but not the textInput box. If I don't specify a width for the textInput, it is centered, but if I increase it extends it to the right and so no longer sits in the center. Ideally I'd like it to take up 100% of the width of the column (which is why I defined column size 8 and offset 2) just like the button, but when I specify a width as a percentage, it doesn't change.

In addition to this I'd like both the textInput and button to appear in the vertical center of the window, but I don't know how to approach that apart from putting in a dummy fluidRow before the first one to eat up some space.

Thanks for any help, I think I've probably spent more time trying to get this page to display properly than I have on the whole rest of the app.

Answer 1

This is a case where browser's developer tools (inspect element) are very handful.

If you check the HTML produced by your code, you'll note that the inputText is inside a div with class = form-group shiny-input-container. This div is also created by the inputText(), which has a width parameter that will be applied on this container div, and not on the input tag.

So, all you need is:

...
textInput("string", label="",value = "", width = "100%"),
...

Full running example:

library(shiny)

runApp(
  list(
    ui = shinyUI(fluidPage(theme = "bootstrap.css",
                           fluidRow(
                             column(8, align="center", offset = 2,
                                    textInput("string", label="",value = "", width = "100%"),
                                    tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center; font-size: 30px; display: block;}")
                             )
                           ),
                           fluidRow(
                             column(6, align="center", offset = 3,
                                    actionButton("button",label = textOutput("prediction")),
                                    tags$style(type='text/css', "#button { vertical-align: middle; height: 50px; width: 100%; font-size: 30px;}")
                             )
                           )
    )
    ), server = shinyServer(function(input, output) {})))