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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32152827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 11:25:35  来源:igfitidea点击:

R shiny: center and resize textInput

cssrshiny

提问by user1425706

I am trying to do something (or so I thought) relatively simple. I have a simple shiny page with just a textInput box and an actionButton.

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

I want them both to appear in the center (vertically and horizontally) of the window.

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

The way I've started going about it is to use a fluidPage with two fluidRows, one for each element:

我开始的方法是使用一个具有两个 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;}")
      )
   )
)
)

I can get the button to appear in the center (horizontally) but not the textInput box. If I don't specify a width for the textInput, it is centered, but if I increase it extends it to the right and so no longer sits in the center. Ideally I'd like it to take up 100% of the width of the column (which is why I defined column size 8 and offset 2) just like the button, but when I specify a width as a percentage, it doesn't change.

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

In addition to this I'd like both the textInput and button to appear in the vertical center of the window, but I don't know how to approach that apart from putting in a dummy fluidRow before the first one to eat up some space.

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

Thanks for any help, I think I've probably spent more time trying to get this page to display properly than I have on the whole rest of the app.

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

回答by Molx

This is a case where browser's developer tools (inspect element) are very handful.

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

If you check the HTML produced by your code, you'll note that the inputTextis inside a divwith class = form-group shiny-input-container. This divis also created by the inputText(), which has a widthparameter that will be applied on this container div, and not on the inputtag.

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

So, all you need is:

所以,你只需要:

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

Full running example:

完整运行示例:

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