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和button都出现在窗口的垂直中心,但我不知道如何处理它除了在第一个占用一些空间之前放入一个虚拟fluidRow.

感谢您的帮助,我想我可能花了更多的时间来试图让这个页面显示得比我应用程序的其余部分都要好.

Answer 1

这是浏览器的开发人员工具(检查元素)非常少的情况.

如果您检查代码生成的HTML,您会注意到它inputText位于divwith中class = form-group shiny-input-container.这div也是由the创建的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) {})))