brillant 4 petites textInput boîtes de side-by-side

pour paraphraser (et pour simplifier le cas de 2 entrées), le problème est que:

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

montre

Mais vous voulez side-by-side de petites entrées, comme suit:

La réponse courte

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

donne:

La réponse longue

Side-by-Side entrées

Faisons côte-à-côté:

Actuellement textInput génère deux balises - les label, et la input, chacun de qui est configuré par CSS display:block, ce qui signifie que c'est un rectangle qui va rompre avec le côté gauche du conteneur. Nous avons besoin d'envelopper chaque textInput's de terrain dans un nouveau conteneur (div) et de dire que le conteneur le conteneur qui le suit (la prochaine textInput) est autorisé à être sur la même ligne horizontale sur la page, à l'aide de CSS,display:inline-block.

Nous avons donc ajouter un div avec un style autour de chaque 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) {}
))

Petites entrées

Maintenant, nous allons traiter avec des petits. Il ya quelques façons de faire de petites,

1. faire la police de caractères plus petite,
2. faire de la zone de saisie ont moins de caractères.
3. dire ou css (ici) bootstrap pour dessiner une petite boîte

Depuis bootstrap.js est vraiment le contrôle de la mise en page lorsque nous utilisons brillant, à seulement 3 sera fiable de travail, nous allons donc l'utiliser.

Entrée tailles sont documentées dans Bootstrap 2.3.2 CSS les Formulaires de documentation, sous le Contrôle de Dimensionnement'. Il comprend une variété de tailles, de la mini, small, medium, large, xlarge, et xxlarge, et la valeur par défaut est probablement moyen. Essayons de petites, à la place.

Pour définir la taille, nous avons besoin de changer la classe de l' input balise générée par textInput.

Maintenant textInput est juste une fonction de commodité autour de la plus puissante tags fonctions telles que tags$label et tags$input. Nous pouvons construire une version plus puissante de textInput qui nous permet de configurer les éléments, notamment la classe de l' input nœud:

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

Et nous sommes en fait -, mais on peut rouler à certaines de ces fonctionnalités par avoir textInput3 générer la balise div. Il pourrait également définir la classe en elle-même, mais je vais laisser cela pour vous écrire.

De l'emballer

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

Pour les intérêts de souci, voici la version à l'aide de la classe input-mini:

Peut-être que cette solution n'est pas dans la en 2013, mais si vous voulez faire cela sans écrire de code HTML ou CSS, vous pouvez simplement utiliser le column fonction au sein d'une fluidRow comme suit:

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

Et il mettra les choses de l'autre côté.

EDIT: Maintenant, il y a un autre moyen très facile de faire cela en utilisant la splitLayout() fonction. Voir Nadir Sidi réponse pour plus de détails.

Comme une alternative à la mise détaillé des déclarations de style dans une classe, il semble que vous pouvez facilement étendre la brillante tags fonctions à votre goût. Ce serait pratique d'avoir autour par défaut.
(c'est avec brillant shiny_0.14.1 ). Je pensais que j'allais avoir besoin d'écrire une fermeture, mais cela semble fonctionner.

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

Je n'étais pas heureux avec splitLayout(), car elle introduit des barres de défilement lorsque l'espace est limité.

J'ai trouvé que, au moins pour l'entrée des widgets comme des boutons ou des zones de texte, une assez facile une solution à un meilleur comportement réactif est à l'aide de flex-zone: (voir cet excellent guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

div(
  style = "display: flex; flex-wrap: wrap;",
  div(
    style = "flex: 1;",
    textInput("inputA", "The first input")
  ),
  div(
    style = "flex: 1;",
    textInput("inputB", "The second input")
  ),
  div(
    style = "flex: 1;",
    textInput("inputC", "The third input")
  )
)

Il est possible d'ajuster la largeur relative. Correspondant à splitLayout(cellWidths = c("25%", "75%"), ...):

div(
  style = "display: flex; flex-wrap: wrap;",
  div(
    style = "flex: 1;",
    textInput("inputA", "The first input")
  ),
  div(
    style = "flex: 3;", # second item 3 times as wide as first one
    textInput("inputB", "The second input")
  )
)