質問

バージョン0.4.0のピカピカサーバーで、小さなtextInputボックスを4つ、このような形にしたいのですが、可能でしょうか？

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

結果のページです。

どのように解決するのですか？

を言い換えると、（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 は 2 つの別々のタグを生成します。 label と input として、それぞれCSSで設定されています。 display:block となっており、コンテナの左側で折れる矩形であることを意味しています。 それぞれの textInput のフィールドを新しいコンテナ (div) で囲み、そのコンテナに対して、それに続くコンテナ (次の textInput ) がページ上の同じ水平方向の行にあることを許可するよう、CSS の display:inline-block .

そこで、それぞれの 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) {}
))

<イグ

小さな入力

さて、次はスモールを扱ってみましょう。 スモールのやり方はいくつかあります。

1. フォントを小さくする
2. 入力ボックスの文字数を少なくする。
3. cssまたは(ここでは)bootstrapに、より小さなボックスを描画するように指示する。

以降 bootstrap.js は本当にshinyを使うときにレイアウトを制御しているので、確実に動作するのは3だけなので、それを使いましょう。

入力サイズについてのドキュメントは Bootstrap 2.3.2 の CSS Forms のドキュメントの 'Control Sizing' の下にあります。 . mini, small, medium, large, xlarge, xxlargeと様々なサイズがあり、デフォルトはmediumでしょう。 代わりに small を試してみましょう。

サイズを設定するために input タグが生成する textInput .

現在 textInput は単なる便宜的な関数で、より強力な tags のような関数です。 tags$label と tags$input . より強力なバージョンの 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 :

<イグ