web-dev-qa-db-ja.com

R光沢：textInputの中央揃えとサイズ変更

私は比較的簡単なことをしようとしています（またはそう思っていました）。 textInputボックスとactionButtonだけのシンプルな光沢のあるページがあります。

両方をウィンドウの中央（垂直方向と水平方向）に表示したいと思います。

私が始めた方法は、各要素に1つずつ、2つの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を配置する以外に、それにアプローチする方法がわかりません。

助けてくれてありがとう、私はおそらくアプリの他の部分よりもこのページを正しく表示するために多くの時間を費やしたと思います。

cssrshiny
7
user1425706

これは、ブラウザの開発者ツール（要素の検査）が非常に少数の場合です。

コードで生成された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) {})))
_
8
Molx