shiny :: numericInputでラベルとボックスを隣り合わせに並べるには？

Question

ラベルの隣にあるボックス（デフォルトの下ではなく）が光沢のある場所にはnumericInput()を作成できますか？ここ

は単純な例である：

library(shiny) 

ui <- shinyUI(fluidPage(

    titlePanel("Shiny with lots of numericInput()"), 

    sidebarLayout(

     sidebarPanel(
      fluidRow(
       column(6, numericInput("a1", label = "A1", value = 1)), 
       column(6, numericInput("b1", label = "B1", value = 1)) 
      ), 
      fluidRow(
       column(6, numericInput("a2", label = "A2", value = 2)), 
       column(6, numericInput("b2", label = "B2", value = 2)) 
      ) 
     ), 

     mainPanel(
      p('something interesting') 
     ) 
    ) 
)) 

server <- function(input, output) {} 

shinyApp(ui, server) 

これは4行をもたらす：それはしないラベル「A1」と「B1」は、対応するボックスの第二のライン、等のための最初の行widthパラメータをnumericInput()に調整しようとすると助けになります。

（残念ながら、私は本当に直接入力ウィジェットのクラスを変更するためのHTMLとCSSを知らない。）

Here同様の問題です。しかし、私はfluidRow（）で同じ行を扱うことができます。ラベルも同じ行に置いておきます。

Answer 1

良い質問ですが、これは他のコントロールにも関連しています。あなたの痛みが分かります。以下の解決策は私が使用するものですが、理想的ではありません。これがコントロールの光沢のあるパラメータとして設定されていれば良いでしょう。 HTML/CSSソリューションが最もよく見えるでしょう。

library(shiny) 
ui <- shinyUI(fluidPage(
    titlePanel("Shiny with lots of numericInput()"), 
    sidebarLayout( 
    sidebarPanel(
     fluidRow(
      column(2, HTML('<b>A1</b>')), 
      column(4, numericInput("a1", label = NULL, value = 1)), 
      column(2, HTML('<b>B1</b>')), 
      column(4, numericInput("b1", label = NULL, value = 1)) 
     ), 
     fluidRow(
      column(2, HTML('<b>A2</b>')), 
      column(4, numericInput("a2", label = NULL, value = 1)), 
      column(2, HTML('<b>B2</b>')), 
      column(4, numericInput("b2", label = NULL, value = 1)) 
     ) 
    ), 
    mainPanel(
     p('something interesting') 
    ) 
))) 
server <- function(input, output) { } 
shinyApp(ui, server) 

Answer 2

ない最高のが、CSSバリアント

inline_numericInput=function(ni){ 
    tags$div(class="form-inline",ni) 
} 

    ui <- shinyUI(fluidPage(
    tags$head(tags$style("#side_panel{ 
         padding-left:10px; 
         } 
         .form-group { 
         margin-bottom: 15px !important; 
         } 
         .form-inline .form-control { 
         width:80%; 
         } 

         ")), 

    titlePanel("Shiny with lots of numericInput()"), 

    sidebarLayout(

    sidebarPanel(width = 4,id="side_panel", 
       fluidRow(
        column(6, inline_numericInput(numericInput("a1", label = "A1", value = 1))), 
        column(6, inline_numericInput(numericInput("b1", label = "B1", value = 1))) 
       ), 
       fluidRow(
        column(6, inline_numericInput(numericInput("a2", label = "A2", value = 2))), 
        column(6, inline_numericInput(numericInput("b2", label = "B2", value = 2))) 
       ) 
    ), 

    mainPanel(
     p('something interesting') 
    ) 
) 
)) 

server <- function(input, output) {} 

shinyApp(ui, server) 

Answer 3

のdiv

div(style="display: inline-block;vertical-align:top;",h5("label1:"), selected='mean'), 
div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput1", label = NULL, value = 20, min = 1)), 

と別の解決策

たRunnableコード：このソリューションで

library(shiny) 
ui <- shinyUI(fluidPage(titlePanel("Shiny with lots of numericInput()"), 
    sidebarLayout( 
    sidebarPanel(
     fluidRow(
     div(style="display: inline-block;vertical-align:top;",h5("label1:"), selected='mean'), 
     div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput1", label = NULL, value = 20, min = 1)), 
     br(), 
     div(style="display: inline-block;vertical-align:top;",h5("label2:"), selected='mean'), 
     div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput2", label = NULL, value = 20, min = 1)) 
     ) 
    ), 
    mainPanel(
     p('something interesting') 
    ) 
))) 
server <- function(input, output) { } 
shinyApp(ui, server)