首页 文章

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

提问于
浏览 次
52

我有一个闪亮的服务器版本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; }"))
    )
))

结果页面：

enter image description here

r shiny

6 回答

  • 100

    解释（并简化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) {}
))

    节目

    enter image description here

    但是你需要并排的小输入，如下所示：

    small row

    答案简短

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

    得到：

    enter image description here

    答案很长

    并排输入

    让我们先并排做：

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

    所以我们在每个 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) {}
))

    row

    小投入

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

    • 使字体变小，

    • 使输入框中包含较少的字符 .

    • 告诉css或（这里）bootstrap画一个小盒子

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

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

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

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

    small row

    我们已经完成了 - 但是我们可以通过让 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) {}
))

    感兴趣's sake, here' s使用类 input-mini 的版本：

    enter image description here

    回复于
  • 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")
      )
  )
)
    回复于
  • 8

    也许这个解决方案不是在2013年，但如果你想在不编写HTML或CSS的情况下这样做，你可以在 fluidRow 中使用 column 函数，如下所示：

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

    它会将事物并排放置 .

    编辑：现在使用 splitLayout() 函数还有另一种非常简单的方法 . 有关详细信息，请参阅Nadir Sidi的答案 .

    回复于
  • 30

    我删除了旧的答案 - 这是一个有效的：

    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）我在 .css 语句中从 select#xlimitsmax 和 select#xlimitsmin 中删除了 select

    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() 中的目的是将输入框及其标签合并为单个对象，以便可以应用样式（在本例中为 display 样式） . 如果你不这样做，标签和盒子就像两个独立的实体一样，在这种情况下很难操纵它们 .

    回复于
  • 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)),
    回复于
  • 43

    如果您想要mainPanel中的输入，可以使用以下内容：

    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，因为你似乎要寻找的输入是数字 . 如果选择numericInput，则可以简单地将textInput替换为上面的numericInput . 如果您想要sidebarPanel中的输入，您可以使用下面的代码 . 将需要上面提到的相同的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))
)
    回复于

相关问题