R brilliant: center and resize textInput

Question

I am trying to make something (or as I thought) relatively simple. I have a simple shiny page with only a text box and actionButton.

I want them both to appear in the center (vertical and horizontal) of the window.

The way I started doing this is to use a fluid with two fluids, 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 make the button appear in the center (horizontal), but not in the text input field. If I do not specify a width for textInput, it will be centered, but if I increase it, it will extend it to the right and, therefore, will no longer sit in the center. Ideally, I would like it to occupy 100% of the width of the column (which is why I determined the size of column 8 and offset 2) in the same way as the button, but when I specify the percentage width, it does not change.

In addition to this, I would like the text and the button to appear in the vertical center of the window, but I do not know how to approach this, in addition to inserting a fictitious liquid. Before you first eat some space.

Thanks for any help, I think I probably spent more time trying to display this page correctly than I have on the rest of the application.

Answer 1

This is the case when the browser developer tools (verification element) are very convenient.

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

So all you need is:

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

Full working 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) {})))