光沢のある4つの小さなテキスト入力ボックス

Question

光沢のあるサーバーバージョン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; }"))
    )
))

結果のページ：

Answer 1

言い換えると（そして、2つの入力の場合に単純化するために）、あなたの問題はそれです：

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

ショー

ただし、次のように小さな並列入力が必要です。

短い答え

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

与える：

長い答え

サイドバイサイド入力

並べてみましょう：

現在、textInputはlabelとinputの2つの個別のタグを生成します。これらはそれぞれ、CSSによってdisplay:blockとして構成されます。つまり、左側に分割される長方形です。コンテナの。各textInputのフィールドを新しいコンテナ（div）でラップし、そのコンテナ（次のtextInput）がページの同じ水平行にあることが許可されていることをコンテナに伝える必要があります。 、CSSのdisplay:inline-blockを使用します。

そこで、各textInputの周りにスタイルを持つdivを追加します。

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

小さな入力

さて、小さなことに対処しましょう。小規模にする方法はいくつかありますが、

1. フォントを小さくし、
2. 入力ボックスの文字数を減らします。
3. cssまたは（ここ）bootstrap=より小さなボックスを描くには

Shinyを使用する場合、bootstrap.jsは実際にレイアウトを制御するため、確実に機能するのは3つだけなので、それを使用しましょう。

入力サイズは Bootstrap 2.3.2のCSS Formsドキュメント、「Control Sizing」の下 に記載されています。ミニ、スモール、ミディアム、ラージ、xラージ、xxラージのさまざまなサイズが含まれており、デフォルトはおそらくミディアムです。代わりに小さく試してみましょう。

サイズを設定するには、inputによって生成されたtextInputタグのクラスを変更する必要があります。

textInputは、tags$labelやtags$inputなどのより強力なtags関数の便利な関数です。要素、特にtextInputノードのクラスを構成できる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) {}
))

これで完了です-textInput3にdivタグを生成させることで、この機能の一部をロールアップできます。また、クラスを単独で設定することもできますが、それはあなたが書くようにしておきます。

まとめます

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

興味を引くために、クラスinput-miniを使用したバージョンを以下に示します。

Answer 2

Shinyの最新バージョンを使用して、splitLayout（）内に入力呼び出しを配置することでこれを実現できます。これにより、流体の行、ボックスなどが、入力フィールドを並べて表示するために必要な列に分割されます。

以下の例では、1つのボックスに3つのテキスト入力があり、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")
      )
  )
)

Answer 3

たぶんこの解決策は2013年にはなかったかもしれませんが、HTMLやCSSを書かずにこれをしたい場合は、column内でfluidRow関数を使用するだけです：

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

そして、物を並べて配置します。

編集：splitLayout()関数を使用してこれを行う別の非常に簡単な方法があります。詳細については、Nadir Sidiの回答を参照してください。

Answer 4

私は古い答えを削除しました-これはうまくいくものです：

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

  ))
))
_

変更点は次のとおりです。

1）_select#xlimitsmax_ステートメントの_select#xlimitsmin_および_.css_からselectを削除しました

2）2つのコントロールをそれぞれ独自のdiv()に入れ、XXminおよびXXmaxという名前を付けました。次に、_.css_ステートメントを追加して、インラインブロックにしました。

これらがたくさんある場合は、次のようなclassステートメントを使用できます。

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

次に、各コントロールdiv()を_class="MyClass"_としてタグ付けし、1つの_.css_ステートメントのみを使用できます。

追加して編集：サンプルコードを投稿していただき、ありがとうございます。

2回目の編集：明確にするためだけに。 div()内にtextInputコマンドを配置するポイントは、スタイル（この場合はdisplayスタイル）ができるように、入力ボックスとそのラベルを単一のオブジェクトに結合することです適用されます。これを行わないと、ラベルとボックスが2つの別個のエンティティとして機能し、このような場合にそれらを操作するのが難しくなります。

Answer 5

冗長なスタイル宣言をクラスに配置する代わりに、光沢のあるタグ関数を好みに合わせて簡単に拡張できるようです。この特定のものは、デフォルトで使用すると便利です。 （これはshiny shiny_0.14.1で行われます）。私はクロージャーを書く必要があると思っていましたが、これはうまくいくようです。

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

Answer 6

MainPanelに入力が必要な場合は、次を使用できます。

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

追加：

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

アプリのcssファイル（www /ディレクトリのstyle.cssなど）で、ui.Rから次のようにソースします：

includeCSS（ 'www/style.R'）

あなたが探していると思われる入力は数値であるため、numericInputではなくtextInputが必要な理由はわかりません。 numericInputを選択した場合、上記のtextInputをnumericInputに置き換えることができます。 sidebarPanelに入力が必要な場合は、以下のコードを使用できます。上記と同じcssファイルが必要になります。

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

Answer 7

splitLayout()には満足できませんでした。スペースが限られているとスクロールバーが表示されるからです。

少なくともボタンやテキストボックスなどの入力ウィジェットの場合、応答性の高い動作を実現する非常に簡単なソリューションはflex-boxを使用することです：（この素晴らしいガイドを参照してください： 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")
  )
)
_