如何使标签和框在闪亮::numericInput 中彼此相邻对齐？答案

【问题标题】：How to make label and box align next to each other in shiny::numericInput?如何使标签和框在闪亮::numericInput 中彼此相邻对齐？
【发布时间】：2017-01-06 21:47:03
【问题描述】：

是否可以为标签旁边的框创建一个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”，第二行用于对应的框，等等。如果我尝试调整 numericInput() 的 width 参数，这将无济于事。

（可惜我不太懂html和css直接修改input widget的class。）

Here 是一个类似的问题。但我可以使用fluidRow() 处理同一行，我希望标签也位于同一行。

【问题讨论】：

标签： r widget shiny

【解决方案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)

【讨论】：

这个解决方案的一个问题（我的想法）——你不能从服务器端更新标签
@Batanichek;显然您不必使用 HTML() 来生成标签，您可以使用 server.R 中的 textOutput 和 ui.R 中的 renderText，并且该对将允许服务器端标签更新。这里的基本思想是将列放在一行中，第一列包含标签，第二列包含输入元素。

【解决方案2】：

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

可运行代码：

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)

【讨论】：

【解决方案3】：

不是最好的，但 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)

【讨论】：