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
R shiny: center and resize textInput
提问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 inputText
is inside a div
with class = form-group shiny-input-container
. This div
is also created by the inputText()
, which has a width
parameter that will be applied on this container div, and not on the input
tag.
如果您检查代码生成的 HTML,您会注意到inputText
位于div
with 中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) {})))