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:
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
Ale chcesz obok siebie małe wejścia, jak tak:
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:
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) {}
))
Małe wejścia
Teraz zajmijmy się małym. Jest kilka sposobów zrobić małe,
- Zmniejsz czcionkę,
- spraw, aby pole wprowadzania miało mniej znaków.
- 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) {}
))
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
:
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")
)
)
)
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.
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.
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)),
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