闪亮的 4 个小文本输入框并排 [英] shiny 4 small textInput boxes side-by-side

问题描述

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

I've got a shiny server version 0.4.0 and I want to have 4 small textInput boxes to look like this:

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

它们现在看起来像这样:

They now look like this:

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),

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

Any ideas how to achieve this?

我已经成功地在代码的其他地方改变了这样的东西:

EDITED: I've successfully changed things like this elsewhere in the code:

<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">

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

And this is what it looks like for the ones that don't work:

<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 不起作用:

Here is a self contained example ui.R that doesn't work:

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

结果页面:

推荐答案

转述(并简化为 2 个输入的情况)，您的问题是:

to paraphrase (and to simplify to the case of 2 inputs), your problem is that:

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

节目

但是你想要并排的小输入，像这样:

But you want side-by-side small inputs, like so:

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.

Currently textInput generates two separate tags - the label, and the input, each of which is configured by CSS as display:block, which means it's a rectangle that will break to the left side of the container. We need to wrap each textInput's field in new container (div) and tell that container that the container that follows it (the next textInput) is allowed to be on the same horizontal row on the page, using CSS's display:inline-block.

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

So we add a div with a style around each 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) {}
))

现在让我们处理小问题.有几种方法可以做小，

Now let's deal with small. There are a few ways to do small,

1. 把字体变小，
2. 使输入框中的字符更少.
3. 告诉 css 或(此处)bootstrap 绘制一个较小的框

由于 bootstrap.js 在我们使用 Shiny 时确实可以控制布局，因此只有 3 个可以可靠地工作，所以让我们使用它.

Since bootstrap.js is really in control of layout when we use shiny, only 3 will reliably work, so let's use that.

输入大小记录在 Bootstrap 2.3.2 的 CSS 表单文档中，位于控制大小调整"下.它包括从 mini、small、medium、large、xlarge 和 xxlarge 的各种尺寸，默认可能是 medium.相反，让我们尝试较小的.

Input sizes are documented in Bootstrap 2.3.2's CSS Forms documentation, under 'Control Sizing'. It includes a variety of sizes from mini, small, medium, large, xlarge, and xxlarge, and the default is probably medium. Let's try small, instead.

要设置大小，我们需要改变textInput生成的input标签的class.

To set the size, we need to change the class of the input tag generated by textInput.

现在 textInput 只是围绕更强大的 tags 函数，例如 tags$label 和 tags$input.我们可以构建一个更强大的 textInput 版本，它允许我们配置元素，特别是 input 节点的类:

Now textInput is just a convenience function around the more powerful tags functions such as tags$label and tags$input. We can build a more powerful version of textInput that allows us to configure the elements, specifically the class of the 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 标签来提升部分功能.它也可以自己设置类，但我会把它留给你写.

And we are done - but we can roll some of this functionality up by having textInput3 generate the div tag. It could also set the class by itself, but I'll leave that for you to write.

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 的版本:

For interest's sake, here's the version using class input-mini:

这篇关于闪亮的 4 个小文本输入框并排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！