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

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＆＃39> 注释，只将其应用于单个输入，我已将输入包装在带有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>

默认情况下，label元素有一个换行符。您需要更改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>
')
))