shiny的4个小文本input框并排

我有一个shiny的服务器版本0.4.0，我想有4个小文本input框看起来像这样：

x-min x-max y-min y-max [...] [...] [...] [...] 

他们现在看起来像这样：

 x-min [...................] x-max [...................] y-min [...................] y-max [...................] 

有了这个代码：

 textInput(inputId="xlimitsmin", label="x-min", value = 0.0), textInput(inputId="xlimitsmax", label="x-max", value = 0.5), textInput(inputId="ylimitsmin", label="y-min", value = 0.5), textInput(inputId="ylimitsmax", label="y-max", value = 1.0), 

任何想法如何实现这一目标？

编辑：我已经成功地在代码中的其他地方改变了这样的事情：

 <style type="text/css">select#yaxis4 { height: 280px; width: 500px; }</style> [... which links to this later on in the page...] <label class="control-label" for="yaxis4">Y-Axis</label> <select id="yaxis4" multiple="multiple"> 

这就是那些不起作用的样子：

 <style type="text/css">select#xlimitsmax { display: inline-block; max-width: 50px; }</style> [... which links to...] <label>x-max</label> <input id="xlimitsmax" type="text" value="0.5"/> 

编辑：

这是一个自包含的示例ui.R不起作用：

 library(shiny) shinyUI( pageWithSidebar( # application title headerPanel("test01"), sidebarPanel( tags$head( tags$style(type="text/css", "select { max-width: 360px; }"), tags$style(type="text/css", ".span4 { max-width: 360px; }"), tags$style(type="text/css", ".well { max-width: 360px; }") ), wellPanel( p(strong("Side Panel:")) ) ), mainPanel( textInput(inputId="xlimitsmin", label="x-min", value = 0.0), tags$head(tags$style(type="text/css", "select#xlimitsmin { max-width: 50px }")), textInput(inputId="xlimitsmax", label="x-max", value = 0.5), tags$head(tags$style(type="text/css", "select#xlimitsmax { display: inline-block; max-width: 50px; }")) ) )) 

结果页面：

Answer 1

解释（并简化为2个input的情况），你的问题是：

 runApp(list( ui = bootstrapPage( textInput(inputId="xlimitsmin", label="x-min", value = 0.0), textInput(inputId="xlimitsmax", label="x-max", value = 0.5) ), server = function(input, output) {} )) 

节目

但是你需要并行的小投入，就像这样：

简短的回答

 textInputRow<-function (inputId, label, value = "") { div(style="display:inline-block", tags$label(label, `for` = inputId), tags$input(id = inputId, type = "text", value = value,class="input-small")) } runApp(list( ui = bootstrapPage( textInputRow(inputId="xlimitsmin", label="x-min", value = 0.0), textInputRow(inputId="xlimitsmax", label="x-max", value = 0.5) ), server = function(input, output) {} )) 

得到：

长的答案

并行input

首先我们并肩作战：

目前，textInput生成两个单独的标签 – label和input ，每个label由CSSconfiguration为display:block ，这意味着它是一个矩形，它将打破到容器的左侧。 我们需要将每个textInput的字段包装在新的容器（div）中，并通过CSS的display:inline-block告诉该容器，它textInput的容器（下一个textInput ）被允许位于页面的同一水平行上display:inline-block 。

所以我们在每个textInput周围添加一个样式的div：

 runApp(list( ui = bootstrapPage( div(style="display:inline-block",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), div(style="display:inline-block",textInput(inputId="xlimitsmax", label="x-max", value = 0.5)) ), server = function(input, output) {} )) 

小投入

现在我们来处理一下。 有几种方法可以做小，

1. 使字体变小，
2. 使input框中有更less的字符。
3. 告诉css或（在这里）bootstrap绘制一个更小的盒子

由于bootstrap.js实际上是在控制布局，当我们使用光泽，只有3可靠的工作，所以让我们使用它。

input大小logging在Bootstrap 2.3.2的CSS窗体文档中，在“控制大小”下 。 它包括从迷你，小，中，大，xlarge，和xxlarge各种大小，默认可能是中等。 让我们尝试一下，而不是。

要设置大小，我们需要更改由textInput生成的input标签的类。

现在textInput只是一个方便的function，围绕更强大的tagsfunction，如tags$label和tags$input 。 我们可以构build一个更强大的textInput版本，允许我们configuration元素，特别是input节点的类：

 textInput2<-function (inputId, label, value = "",...) { tagList(tags$label(label, `for` = inputId), tags$input(id = inputId, type = "text", value = value,...)) } runApp(list( ui = bootstrapPage( div(style="display:inline-block",textInput2(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small")), div(style="display:inline-block",textInput2(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small")) ), server = function(input, output) {} )) 

我们完成了 – 但是我们可以通过让textInput3生成div标签来实现这个function。 它也可以自己设定class级，但是我会留给你写。

把它包起来

 textInput3<-function (inputId, label, value = "",...) { div(style="display:inline-block", tags$label(label, `for` = inputId), tags$input(id = inputId, type = "text", value = value,...)) } runApp(list( ui = bootstrapPage( textInput3(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small"), textInput3(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small") ), server = function(input, output) {} )) 

为了感兴趣的缘故，下面是使用class input-mini的版本：

Answer 2

也许这个解决scheme并不在2013年，但是如果你想在不写HTML或CSS的情况下做到这一点，你可以使用如下的fluidRow的column函数：

  fluidRow( column(3, selectInput('pcat', 'Primary Category', c("ALL", unique(opscom$category.name)))), column(3, selectInput('smodel', 'Statistical Model', c("NONE", "LINEAR REGRESSION", "LOWESS"))) ) 

它会把事情并排放置。 我不能显示图像的例子，因为stackoverflow代表。

Answer 3

使用最新版本的Shiny，可以通过将input调用放在splitLayout（）中来完成。 这会将stream体行，框等分成必需的列，以便并排显示input字段。

下面的例子会给你一个盒子里的三个文本input，它将在fluidRow中并排显示。

 fluidRow( box(width = 12, title = "A Box in a Fluid Row I want to Split", splitLayout( textInput("inputA", "The first input"), textInput("inputB", "The second input"), textInput("inputC", "The third input") ) ) ) 

Answer 4

我删除了旧的答案 – 这是一个工程：

ui.r：

 library(shiny) shinyUI( pageWithSidebar( # application title headerPanel("test01"), sidebarPanel( tags$head( tags$style(type="text/css", "select { max-width: 360px; }"), tags$style(type="text/css", ".span4 { max-width: 360px; }"), tags$style(type="text/css", ".well { max-width: 360px; }") ), wellPanel( p(strong("Side Panel:")) ) ), mainPanel( div(id="XXmin",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), tags$head(tags$style(type="text/css", "#XXmin {display: inline-block}")), tags$head(tags$style(type="text/css", "#xlimitsmin {max-width: 50px}")), div(id="XXmax",textInput(inputId="xlimitsmax", label="x-max", value = 0.5)), tags$head(tags$style(type="text/css", "#XXmax {display: inline-block}"), tags$head(tags$style(type="text/css", "#xlimitsmax {max-width: 50px}")) )) )) 

以下是我所做的更改：

1）我从select#xlimitsmax取消select ，并在.css语句中select#xlimitsmin

2）我把你的两个控件各自在自己的div()并给他们的名字XXmin和XXmax 。 然后，我添加了.css语句，使他们内联块。

如果你有一堆这些你可能想要使用一个class声明 – 例如：

 div(class="MyClass",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), tags$head(tags$style(type="text/css", ".MyClass {display: inline-block}")), tags$head(tags$style(type="text/css", "#xlimitsmin {max-width: 50px}")), 

那么你可以把每个控件div()的class="MyClass"标记出来，只使用一个.css语句。

编辑补充：感谢张贴示例代码 – 这使得它更容易。

第二编辑：只是澄清。 将textInput命令放在div()的要点是将input框和它的标签合并成一个对象，以便可以应用样式（在这种情况下是display样式）。 如果你不这样做的话，标签和盒子就像两个独立的实体一样，在这种情况下操作它们就更困难了。

Answer 5

作为在类中放置详细样式声明的替代方法，您可以轻松地将shiny的标签函数扩展到您喜欢的位置。 默认情况下，这个特定的方法会很方便。 （这是shiny的shiny_0.14.1）。 以为我需要写封闭，但这似乎工作。

 inline = function (x) { tags$div(style="display:inline-block;", x) } inline(textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), inline(textInput(inputId="xlimitsmax", label="x-max", value = 0.5)), inline(textInput(inputId="ylimitsmin", label="y-min", value = 0.5)), inline(textInput(inputId="ylimitsmax", label="y-max", value = 1.0)), 

Answer 6

如果你想在mainPanel中的input，你可以使用以下内容：

 div(class="row-fluid", div(class="span1",textInput("xlimitsmin", label = "x-min", value = 0.0)), div(class="span1",textInput("xlimitsmax", label = "x-max", value = 0.5)), div(class="span1",textInput("ylimitsmin", label = "y-min", value = 0.5)), div(class="span1",textInput("ylimitsmax", label = "y-max", value = 1.0)) ) 

加：

 #xlimitsmin, #xlimitsmax, #ylimitsmin, #ylimitsmax { max-width: 25px; } 

在你的应用程序的css文件（例如，在www /目录下的style.css），并从ui.R源：

includeCSS（ 'WWW / style.R'）

我不知道为什么你需要一个textInput而不是一个numericInput，因为你似乎正在寻找的input是数字。 如果你selectnumericInput，你可以简单地用上面的numericInput代替textInput。 如果你想在sidebarPanel的input，你可以使用下面的代码。 上面提到的相同的css文件将是需要的。

 div(class="row-fluid", div(class="span3",numericInput("xlimitsmin", label = "x-min", value = 0.0)), div(class="span3",numericInput("xlimitsmax", label = "x-max", value = 0.5)), div(class="span3",numericInput("ylimitsmin", label = "y-min", value = 0.5)), div(class="span3",numericInput("ylimitsmax", label = "y-max", value = 1.0)) )