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

4回答

元芳怎么了

释义（并简化为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

0 0

偶然的你

使用最新版本的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")      )  ))

0 0

繁花不似锦

也许该解决方案在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的答案。

0 0

慕田峪4524236

我删除了旧答案-这是一个可行的方法：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.css2）我将您的两个控件分别放在各自的位置，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样式）。如果您不这样做，则标签和框将充当两个单独的实体，并且在这种情况下很难操作它们。

0 0