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位於div class = form-group shiny-input-container的div class = form-group shiny-input-container 。 此div也由inputText()創建，它具有將應用於此容器div的width參數，而不是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) {})))