css - R Shiny : center and resize textInput

Question

我正在尝试做一些(或者我认为)相对简单的事情。我有一个简单的 Shiny 页面，其中只有一个文本输入框和一个操作按钮。

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

我开始使用的方法是使用带有两个 fluidRow 的 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 指定宽度，它会居中，但如果我增加它，它就会向右延伸，因此不再位于中心。理想情况下，我希望它像按钮一样占据列宽的 100%(这就是我定义列大小 8 和偏移量 2 的原因)，但是当我将宽度指定为百分比时，它不会改变.

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

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

Answer 1

在这种情况下，浏览器的开发人员工具(检查元素)非常少。

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

所以，你只需要:

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