shiny 4 piccolo testoCassette di input affiancate

Ho una versione server lucida 0.4.0 e voglio avere 4 piccole caselle textInput come questa:

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

Ora sembrano così:

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

Con questo codice:

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

Qualche idea su come ottenere questo?

MODIFICATO: Ho modificato con successo cose come questa altrove nel codice:

 select#yaxis4 { height: 280px; width: 500px; } [... which links to this later on in the page...]   

E questo è quello che sembra per quelli che non funzionano:

 select#xlimitsmax { display: inline-block; max-width: 50px; } [... which links to...]   

MODIFICATO:

Ecco un esempio self-contained ui.R che non funziona:

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

Pagina risultante:

inserisci la descrizione dell'immagine qui

per parafrasare (e per semplificare nel caso di 2 input), il tuo problema è che:

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

Spettacoli

inserisci la descrizione dell'immagine qui

Ma vuoi piccoli input side-by-side, in questo modo:

piccola fila

La risposta breve

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

dà:

inserisci la descrizione dell'immagine qui

La lunga risposta

Ingressi affiancati

Facciamo prima una accanto all'altra:

TextInput attualmente genera due tag separati: l' label e l' input , ciascuno dei quali è configurato da CSS come display:block , che significa che è un rettangolo che si spezza sul lato sinistro del contenitore. Abbiamo bisogno di avvolgere ogni campo di textInput nel nuovo contenitore (div) e dire al contenitore che il contenitore che lo segue (il prossimo textInput ) può trovarsi sulla stessa riga orizzontale della pagina, usando il display:inline-block del CSS display:inline-block .

Quindi aggiungiamo un div con uno stile attorno a ogni 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) {} )) 

riga

Piccoli input

Ora affrontiamo piccoli. Ci sono alcuni modi per fare piccoli,

  1. rendere il carattere più piccolo,
  2. rendere la casella di input con meno caratteri.
  3. dì css o (qui) bootstrap per disegnare una scatola più piccola

Dal momento che bootstrap.js davvero il controllo del layout quando usiamo il shiny, solo 3 funzionerà in modo affidabile, quindi usiamolo.

Le dimensioni degli input sono documentate nella documentazione dei moduli CSS di Bootstrap 2.3.2, sotto 'Control Sizing' . Comprende una varietà di formati da mini, piccolo, medio, grande, xlarge e xxlarge e il valore predefinito è probabilmente medio. Proviamo piccolo, invece.

Per impostare la dimensione, è necessario modificare la class del tag di input generato da textInput .

Ora textInput è solo una comoda funzione attorno alle più potenti funzioni di tags$label come tags$label e tags$input . Possiamo creare una versione più potente di textInput che ci consente di configurare gli elementi, in particolare la class del nodo di 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) {} )) 

piccola fila

E abbiamo finito, ma siamo in grado di textInput3 alcune di queste funzionalità textInput3 nel tag div. Potrebbe anche impostare la class da sola, ma lascerò che tu scriva.

Avvolgendolo

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

Per interesse, ecco la versione usando la class input-mini :

inserisci la descrizione dell'immagine qui

Usando l’ultima versione di Shiny, puoi farlo inserendo le chiamate di input all’interno di splitLayout (). Ciò dividerà la riga, la scatola, ecc. Fluidi nelle colonne necessarie richieste per mostrare i campi di input affiancati.

L’esempio seguente ti darà tre input di testo in una finestra, che appariranno fianco a fianco nella 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") ) ) ) 

Forse questa soluzione non era presente nel 2013 ma se vuoi farlo senza scrivere HTML o CSS puoi semplicemente usare la funzione di column all’interno di una fluidRow modo:

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

E metterà le cose fianco a fianco.

EDIT: Ora c’è un altro modo molto semplice per farlo usando la funzione splitLayout() . Vedi la risposta di Nadir Sidi per maggiori dettagli.

Ho cancellato la vecchia risposta: eccone una che funziona:

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

Ecco le modifiche che ho apportato:

1) Ho eliminato la select da select#xlimitsmax e select#xlimitsmin nelle istruzioni .css

2) Ho messo i due controlli ciascuno nella propria div() e XXmin dato loro i nomi XXmin e XXmax . Ho quindi aggiunto istruzioni .css per renderli inline-block.

Se ne hai un sacco, potresti voler usare una dichiarazione di class – come:

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

quindi puoi taggare ciascuno dei controlli div() come class="MyClass" e usare solo una dichiarazione .css .

Modificato per aggiungere: Grazie per aver pubblicato il codice di esempio – che lo ha reso molto più facile.

2 ° Edit: solo per chiarire. Il punto di mettere i comandi textInput all’interno di un div() è unire la casella di input e la sua etichetta in un singolo object in modo che gli stili (in questo caso lo stile di display ) possano essere applicati. Se non lo fai, l’etichetta e il riquadro agiscono come due quadro separate ed è più difficile manipolarli in casi come questo.

In alternativa alle dichiarazioni di stile verbose in una class, sembra che tu possa facilmente estendere le funzioni dei tag lucenti a tuo piacimento. Questo particolare sarebbe comodo avere in giro per impostazione predefinita. (questo è con shiny shiny_0.14.1). Ho pensato che avrei dovuto scrivere una chiusura, ma questo sembra funzionare.

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

Se vuoi gli input in mainPanel puoi usare quanto segue:

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

Inserisci:

 #xlimitsmin, #xlimitsmax, #ylimitsmin, #ylimitsmax { max-width: 25px; } 

in un file css (ad esempio, style.css nella directory www /) nella tua app e fonte da ui.R con:

includeCSS ( ‘www / style.R’)

Non sono sicuro del motivo per cui hai bisogno di un input testo anziché di un valore numerico poiché l’input che stai cercando è numerico. Se scegli numericInput puoi semplicemente sostituire textInput con numericInput nel precedente. Se vuoi inserire gli input nel sidebarPanel puoi usare il codice qui sotto. Sarebbe necessario lo stesso file css sopra menzionato.

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