błyszczące 4 małe pudełka tekstinput obok siebie

Mam shiny server w wersji 0.4.0 i chcę mieć 4 małe pudełka textInput, aby wyglądały tak:

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

Teraz wyglądają tak:

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

Z tym kodem:

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),
Jakieś pomysły, jak to osiągnąć?

Edytowany: z powodzeniem zmieniłem takie rzeczy gdzie indziej w kodzie:

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

A tak to wygląda dla tych co nie działają:

<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"/>

Edycja:

Oto samowystarczalny przykład ui.R, który nie praca:

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

Strona wynikowa:

Tutaj wpisz opis obrazka

 50
Author: 719016, 0000-00-00

6 answers

Parafrazując (i upraszczając do przypadku 2 wejść), twój problem polega na tym, że:

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

Pokazuje

Tutaj wpisz opis obrazka

Ale chcesz obok siebie małe wejścia, jak tak:

mały rząd

Krótka odpowiedź

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

Daje:

Tutaj wpisz opis obrazka

Długa odpowiedź

Wejścia Side-by-side

Zróbmy najpierw side-by-side:

Obecnie textInput generuje dwa oddzielne znaczniki - label i input, z których każdy jest skonfigurowany przez CSS jako display:block, co oznacza, że jest to prostokąt, który złamie się po lewej stronie kontenera. Musimy zawinąć każde pole textInput w nowy kontener (div) I powiedzieć temu kontenerowi, że kontener, który za nim podąża (następny textInput) może znajdować się w tym samym poziomym wierszu na stronie, używając CSS display:inline-block.

Więc dodajemy div ze stylem wokół każdego 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) {}
))

rząd

Małe wejścia

Teraz zajmijmy się małym. Jest kilka sposobów zrobić małe,

  1. Zmniejsz czcionkę,
  2. spraw, aby pole wprowadzania miało mniej znaków.
  3. powiedz css lub (tutaj) bootstrap, aby narysowali mniejsze pole

Ponieważ {[12] } naprawdę kontroluje układ, kiedy używamy shiny, tylko 3 będzie niezawodnie działać, więc użyjmy tego.

Rozmiary wejściowe są udokumentowane w Bootstrap 2.3.2 w dokumentacji formularzy CSS, w sekcji "control Sizing" . Obejmuje różne rozmiary od mini, małych, średnich, dużych, xlarge i xxlarge, a domyślnym jest prawdopodobnie medium. Spróbujmy trochę.

Aby ustawić rozmiar, musimy zmienić klasę znacznika input wygenerowanego przez textInput.

Teraz textInput jest tylko funkcją wygodną wokół potężniejszych tags funkcji, takich jak tags$label i tags$input. Możemy zbudować potężniejszą wersję textInput, która pozwala nam skonfigurować elementy, w szczególności klasę węzła 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) {}
))

mały rząd

I skończyliśmy-ale my może zwijać niektóre z tych funkcji w górę poprzez textInput3 wygenerować znacznik div. Może też sama ustawić klasę, ale zostawię ci to do napisania.

Owijanie

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

Ze względu na zainteresowanie, oto wersja używająca klasy input-mini:

Tutaj wpisz opis obrazka

 93
Author: Alex Brown,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-23 19:32:10

Używając najnowszej wersji Shiny, możesz to osiągnąć, umieszczając wywołania wejściowe w splitlayout (). Spowoduje to podział rzędu płynu, pudełka itp. do niezbędnych kolumn wymagane, aby pokazać swoje pola wejściowe obok siebie.

Poniższy przykład daje trzy wejścia tekstowe w polu, które pojawią się obok siebie w strumieniu 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")
      )
  )
)
 35
Author: Nadir Sidi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-28 17:21:42

Być może tego rozwiązania nie było w 2013 roku, ale jeśli chcesz to zrobić bez pisania HTML lub CSS, możesz po prostu użyć funkcji column wewnątrz fluidRow w następujący sposób:

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

I umieści rzeczy obok siebie.

EDIT: teraz jest inny bardzo łatwy sposób, aby to zrobić za pomocą funkcji splitLayout(). Więcej szczegółów znajdziesz w odpowiedzi Nadir Sidi.

 29
Author: C W,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-19 15:02:32

Usunąłem starą odpowiedź-tutaj jest taka, która działa:

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

  ))
))

Oto wprowadzone przeze mnie zmiany:

1) wyeliminowałem select z select#xlimitsmax i select#xlimitsmin w Twoich .css wypowiedziach

2) umieściłem Twoje dwie kontrolki w swoich div() i nadałem im nazwy XXmin i XXmax. Następnie dodałem .css instrukcje, aby uczynić je inline-block.

Jeśli masz ich kilka, możesz użyć class Oświadczenia - takiego jak:

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

Wtedy ty może oznaczyć każdą kontrolkę div() jako class="MyClass" i użyć tylko jednej instrukcji .css.

Edited to add: Thanks for posting the example code - that made it much easier.

Druga edycja: dla wyjaśnienia. Celem umieszczania poleceń textInput wewnątrz div() jest połączenie pola wejściowego i jego etykiety w jeden obiekt, tak aby można było zastosować style (w tym przypadku styl display). Jeśli tego nie zrobisz, etykieta i pudełko działają jak dwa oddzielne byty i trudniej jest nimi manipulować w takich przypadkach.

 8
Author: John Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-09 18:45:44

Jako alternatywa dla umieszczania wyrazistych deklaracji stylu w klasie, wydaje się, że możesz łatwo rozszerzyć funkcje shiny tags do swoich potrzeb. Ten konkretny byłby wygodny do posiadania domyślnie. (jest to z shiny shiny_0.14.1 ). Myślałem, że będę musiał napisać zakończenie, ale to chyba działa.

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)),
 5
Author: Nathan Siemers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-07 16:01:43

Jeśli Chcesz wejść w mainPanel, możesz użyć następującego:

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

Dodaj:

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

W pliku css (np. style.css w katalogu www/) w aplikacji i źródło go z interfejsu użytkownika.R z:

IncludeCSS ('www / style.R')

Nie jestem pewien, dlaczego potrzebujesz textInput, a nie numericInput, ponieważ wejście, którego szukasz, jest numeryczne. Jeśli wybierzesz numericInput, możesz po prostu zamienić textInput na numericInput w powyższym przykładzie. Jeśli chcesz wejść w sidebarPanel możesz użyć kodu be

 2
Author: ,
Warning: date() expects parameter 2 to be long, string given in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54