如何将盒子和标签放在同一行？(闪亮的包装) [英] How to put a box and its label in the same row? (shiny package)

问题描述

在SHILINY中，假设我使用textInput，字段/框总是显示在标签下面。有没有办法强制它们排在同一行？

ie，Label: BOX

而不是

Label:

Box

推荐答案

这是一个非常老的问题，但我认为回答它对偶然发现这个问题的人可能很有用。

添加此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)

APP的输出如下：

编辑： 为了解决@Fixtace关于仅将其应用于单个输入的注释，我将输入包装在一个带有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)

这样，您的输出看起来如下所示：

这篇关于如何将盒子和标签放在同一行？(闪亮的包装)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！