框中和输入内联在Shiny中，但仅适用于某些输入

Question

我想要一些输入让他们的标签与输入框内联，而其他输入则表现出标准的Shiny标准行为。考虑一下SBista在这里给出的答案（以及最小的例子）：How to put a box and its label in the same row? (shiny package)

library(shiny)
ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "label{ display: table-cell; text-align: center; vertical-align: middle; } 
            .form-group { display: table-row;}")
    ),

    textInput(inputId = "txtInp", label = "Label:"),
    textInput(inputId = "txtInp2", label = "A_longer_label:"),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

这样可以得到非常整洁的输出：

这里输入框整齐排列。如果我只想要一些标签来展示这种行为（而其他标签要表现出正常的闪亮的东西），我可以创建id“inline”并将其添加到相关标签周围的div中，如下所示：

library(shiny)
ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                #inline .form-group { display: table-row;}")
    ),

    tags$div(id = "inline", textInput(inputId = "txtInp", label = "Label:")),
    tags$div(id = "inline", textInput(inputId = "txtInp2", label = "Label2_not_inline:")),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

现在第三个标签的行为符合预期，但前两个标签并未整齐排列。我想这是因为id只能使用一次。如何使用一个类来实现多个输入的预期结果？

Answer 1

要实现您的目标，您可以修改css，如下所示：

tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                 .inline .form-group{display: table-row;}")

代码看起来像这样：

library(shiny)
ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                 .inline .form-group{display: table-row;}")
      ),

    tags$div(class = "inline", textInput(inputId = "txtInp", label = "Label:"),
    textInput(inputId = "txtInp2", label = "Label2:")),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

使用此代码，您将获得看起来更清晰的标签，如下所示：

希望它有所帮助！