[英]R shiny: center and resize textInput
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. 我可以让按钮出现在中心(水平)而不是textInput框。 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. 如果我没有为textInput指定宽度,它将居中,但如果我增加它,则将其向右延伸,因此不再位于中心。 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. 理想情况下,我希望它占据列宽度的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和button都出现在窗口的垂直中心,但我不知道如何处理它除了在第一个占用一些空间之前放入虚拟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. 感谢您的帮助,我想我可能花了更多的时间来试图让这个页面显示得比我应用程序的其余部分都要好。
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
. 如果检查代码生成的HTML,您会注意到inputText
位于div
class = form-group shiny-input-container
的div
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. 此div
也由inputText()
创建,它具有将应用于此容器div的width
参数,而不是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) {})))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.