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

Question

闪亮的4个小文本输入框并排我有一个闪亮的服务器版本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) {}

))

行

小投入

现在让我们来处理小问题。有几种做小事情的方法，

缩小字体，

使输入框中的字符更少。

告诉CSS或（这里）引导程序绘制一个较小的框

因为bootstrap.js当我们使用光亮效果时实际上可以控制布局，所以只有3个可以可靠地起作用，所以让我们使用它。

输入大小记录在Bootstrap 2.3.2的CSS Forms文档中的“控件大小”下。它包括mini，small，medium，large，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) {}

))

出于兴趣的考虑，这是使用class的版本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）我在您的声明中删除了selectfrom 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()的标记为，class="MyClass"并且仅使用一个.css语句。

编辑添加：感谢您发布示例代码-简化了。

第二编辑：只是为了澄清。将textInput命令放在a内的目的div()是将输入框及其标签组合到一个对象中，以便可以应用样式（在这种情况下为display样式）。如果您不这样做，则标签和框将充当两个单独的实体，并且在这种情况下很难操作它们。