闪亮的4个小文本输入框并排

Question

我有一个闪亮的服务器版本0.4.0,我希望有4个小textInput框看起来像这样:

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输入的情况),你的问题是:

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

得到:

答案很长

并排输入

让我们先并排做:

目前textInput生成两个单独的标签 - 每个标签label,并且input每个标签都由CSS配置display:block,这意味着它是一个矩形,将突破到容器的左侧.我们需要将每个textInput字段包装在新容器(div)中,并告诉容器textInput使用CSS来允许容器跟随它(下一个)容器在页面上的同一水平行上display:inline-block.

所以我们添加一个带有每个样式的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画一个小盒子

因为bootstrap.js当我们使用闪亮时真的可以控制布局,所以只有3个可靠地工作,所以让我们使用它.

输入大小记录在Bootstrap 2.3.2的CSS Forms文档中,在"Control Sizing"下.它包括各种尺寸,从迷你,小,中,大,xlarge和xxlarge,默认可能是中等.让我们试试小而不是.

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

现在textInput只是围绕更强大tags功能的便利功能,例如tags$label和tags$input.我们可以构建一个更强大的版本textInput,允许我们配置元素,特别是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标签来完成一些功能.它也可以自己设置类,但我会留给你写.

把它包起来

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:

Answer 2

使用最新版本的Shiny,您可以通过将输入调用放在splitLayout()中来实现此目的.这会将流体行,框等分成必要的列,以便并排显示输入字段.

下面的示例将在一个框中为您提供三个文本输入,这些输入将在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 3

也许这个解决方案在2013年还没有,但如果你想在不编写HTML或CSS的情况下这样做,你可以像这样使用这个column功能fluidRow:

  fluidRow(
    column(3,
    selectInput('pcat', 'Primary Category', c("ALL", "Some"))),
    column(3,
    selectInput('smodel', 'Statistical Model', c("NONE", "LINEAR REGRESSION", "LOWESS")))
  )

它会将事物并排放置.

编辑:现在有另一个非常简单的方法来使用该splitLayout()功能.有关详细信息,请参阅Nadir Sidi的答案.

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从你select#xlimitsmax和select#xlimitsmin你的.css陈述中删除了

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()为as,class="MyClass"并只使用一个.css语句.

编辑添加:感谢发布示例代码 - 这使得它更容易.

第二编辑:只是为了澄清.将textInput命令放在a中的目的div()是将输入框及其标签合并为单个对象,以便可以应用样式(在本例中为display样式).如果你不这样做,标签和盒子就像两个独立的实体一样,在这种情况下很难操纵它们.

Answer 5

作为在类中放置详细样式声明的替代方法,您似乎可以根据自己的喜好轻松扩展闪亮标记函数.默认情况下,这个特别的方便.(这是闪亮的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)),