如何将盒子及其标签放在同一行？(闪亮包装)

Question

在Shiny中,比如我正在使用textInput,字段/框总是显示在标签下方.有没有办法可以迫使他们在同一排？

即 Label: BOX

代替

Label:

Box

Answer 1

这是一个非常古老的问题,但是想到回答这个问题对于偶然发现这个问题的人来说可能是有用的.

添加此css有助于在输入旁边实现标签

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

这是一个示例应用程序:

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:"),
    numericInput(inputId = "numInp", label = "Label:", value = 0)
  )
)

server <- function(input, output){}


shinyApp(ui, server)

该应用程序的输出如下:

编辑: 为了解决@ fiftace关于仅将其应用于单个输入的注释,我已将输入包装在具有id的div中,并将css修改为仅应用于该ID,如下所示:

library(shiny)

ui <- fluidPage(

  fluidRow(

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

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

server <- function(input, output){}


shinyApp(ui, server)

有了这个,你的输出如下:

Answer 2

查看 fileInput 的 HTML 输出，例如

fileInput("myfile", "Normal Label") 

它生成的 HTML 是：

<label>Normal Label</label>
<input id="myfile" type="file"/>
<div id="myfile_progress" class="progress progress-striped active shiny-file-input-progress">
  <div class="bar"></div>
  <label></label>
</div>

默认情况下，标签元素有一个换行符。你需要改变 CSS 来摆脱它，即你需要添加类似的东西

shinyUI(bootstrapPage(
  tags$head(    
    tags$style("label {display:inline;}")
  ),
  fileInput("myfile", "Inline Label")
))

这当然会影响所有标签元素，而不仅仅是这个标签元素。如果您只想修改这一点，则需要将 HTML 代码直接包含在您的应用程序中。您可以使用 HTML 函数来完成此操作（请注意附加的 CSS 语句）。

shinyUI(bootstrapPage(
  HTML('
  <label style="display: inline;">Inline Label</label>
    <input id="myfile" type="file"/>
    <div id="myfile_progress" class="progress progress-striped active shiny-file-input-progress">
    <div class="bar"></div>
    <label></label>
    </div>
')
))