R闪亮：居中并调整textInput的大小

Question

我正在尝试做一些相对简单的事情（或者我认为）。我有一个简单的闪亮页面，只有一个 textInput 框和一个 actionButton。

我希望它们都出现在窗口的中心（垂直和水平）。

我开始使用的方法是使用带有两个fluidRows的fluidPage，每个元素一个：

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;}")
      )
   )
)
)

我可以让按钮出现在中心（水平），但不是 textInput 框。如果我没有为 textInput 指定宽度，它会居中，但如果我增加它会将它向右扩展，因此不再位于中心。理想情况下，我希望它像按钮一样占据列宽的 100%（这就是我定义列大小 8 和偏移量 2 的原因），但是当我将宽度指定为百分比时，它不会改变.

除此之外，我希望 textInput 和按钮都出现在窗口的垂直中心，但除了在第一个吃完之前放入一个虚拟的 fluidRow 之外，我不知道如何处理一些空间。

感谢您的帮助，我想我可能花费了更多时间来尝试让此页面正确显示，而不是在整个应用程序的其余部分上。

Answer 1

这是浏览器的开发工具（检查元素）非常少的情况。

如果您检查代码生成的 HTML，您会注意到 inputText 位于 div 和 class = form-group shiny-input-container 内。这个div 也是由inputText() 创建的，它有一个width 参数，将应用于此容器div，而不是input 标记。

所以，你只需要：

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

完整运行示例：

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