我有一个shiny 的服务器版本0.4.0,我想有4个小文本输入框,看起来像这样:

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; }"))
    )
))

结果页面:

在此处输入图像描述

推荐答案

解释一下(并简化为两个输入的情况),您的问题是:

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

显示

在此处输入图像描述

但你需要并排的小输入,比如:

小行

The short answer

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

给予:

在此处输入图像描述

The long answer

并排输入

让我们先并排做:

目前,textInput生成两个独立的标记——labelinput,每个标记都由CSS配置为display:block,这意味着它是一个矩形,将在容器的左侧断开.我们需要将每个textInput的字段包装在新容器(div)中,并使用CSS的display:inline-block告诉该容器,它后面的容器(下一个textInput)可以位于页面上的同一水平行上.

因此,我们添加了一个div,每个div的样式大约为textInput:

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. 使输入框中的字符更少.
  3. 告诉css或(此处) bootstrap 程序绘制一个较小的框

因为当我们使用shiny时,bootstrap.js实际上控制着布局,所以只有3个可以可靠地工作,所以让我们使用它.

输入大小记录在Bootstrap 2.3.2's CSS Forms documentation, under 'Control Sizing'中.它包括各种尺寸,从迷你、小型、中型、大型、xlarge和xxlarge,默认值可能是中型.让我们试试小的.

要设置大小,我们需要更改textInput生成的input标记的类.

现在,textInput只是一个方便的函数,与tags$labeltags$input等更强大的tags函数相比.我们可以构建一个更强大的textInput版本,允许我们配置元素,特别是input node 的类:

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标签来增加一些功能.它也可以自行设置类,但我将留给您编写.

把它包起来

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

出于兴趣,以下是使用input-mini类的版本:

在此处输入图像描述

R相关问答推荐

使用每个组的最后一行连接两个数据帧

使用lares::corr_var函数在for循环中分配变量的问题

使用na.locf在长格式数据集中输入具有多个时间点的数据集

如何判断某列中由某些行组成的百分比

根据R中的另一个日期从多列中 Select 最近的日期和相应的结果

R箱形图gplot 2 4组但6个参数

R中的子集文件—读取文件名索引为4位数字序列,例如0001到4000,而不是1到4000)

如何根据组大小应用条件过滤?

如何直接从R中的风险分数计算c指数?

如何从R ggplot图片中获取SVG字符串?

找出二叉树中每个 node 在R中的深度?

使用Scale_*_MANUAL时在图例中保留未使用的系数级别

更新R中的数据表(使用data.table)

R如何计算现有行的总和以添加新的数据行

根据纬度和距离连接两个数据集

如何在PrePlot()中将多个元素设置为斜体

如何预测原始数据集并将值添加到原始数据集中

以任意顺序提取具有多个可能匹配项的组匹配项

随机将数据帧中特定列上的某些行设置为NA

Ggplot2如何找到存储在对象中的残差和拟合值?