солнечные 4 маленьких textInput поля бок о бок
У меня есть солнечная серверная версия 0.4.0, и я хочу иметь 4 маленьких textInput поля для сходства с этим:
x-min x-max y-min y-max
[...] [...] [...] [...]
Они теперь похожи на это:
x-min
[...................]
x-max
[...................]
y-min
[...................]
y-max
[...................]
С этим кодом:
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),
Какие-либо идеи, как достигнуть этого?
ОТРЕДАКТИРОВАННЫЙ: я успешно изменил вещи как это в другом месте в коде:
<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">
И это - то, на что это похоже для тех, которые не работают:
<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"/>
ОТРЕДАКТИРОВАННЫЙ:
Вот сам содержавший пример 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(
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; }"))
)
))
Получающаяся страница:
1 ответ
Я не был доволен splitLayout(), потому что это представляет полосы прокрутки, когда пространство ограничено.
я нашел, что, по крайней мере, для входных кнопок Мне нравится виджетов или текстовых полей, довольно легкое решение с лучшим быстро реагирующим поведением использует поле гибкого провода: (см. этого замечательного гида: 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")
)
)
возможно скорректировать относительные ширины. Соответствие 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")
)
)