闪亮：标签位置，文本输入 [英] Shiny: Label position, textInput

问题描述

让我们假设我有一个非常简单的应用程序，它只有8个输入分组在2个面板中（4个输入| 4个输入-参见下面的图片），基于这些，我绘制了一个小图（简单）。

我面临的问题是我只希望第一个面板的标签位于 textInput 框的左侧。

例如（请原谅我草率的图像编辑！）

有任何建议吗？

我的图1输出的MWE：

  library（shiny）
 ui&-; shinyUI（fluidPage（
 wellPanel（
 tags $ style（type = text / css，'#leftPanel {max-width：300px; float：left ;}'），
 id = leftPanel，
 textInput（ Population1000，'Population 1000'， 15），
 textInput（ Area1000，'Area 1000'，  20），
 textInput（ GNI1000，'GNI 1000'， 2314），
 textInput（ GDP1000， GDP 1000， 1000）
）， 
 wellPanel（
 tags $ style（type = text / css，'#RightPanel {max-width：300px; float：left;}'），
 id = RightPanel， 
 textInput（ Population2000，'Population 2000'， 15），
 textInput（ Area2000，'Area 2000'， 20），
 textInput（ GNI2000， 'GN I 2000'， 2314），
 textInput（ GDP2000， GDP 2000， 1000）
）
）
）
服务器<- ShinyServer（函数（输入，输出）{NULL}）
 ShinyApp（用户界面，服务器）
  

解决方案

您可以尝试使用Bootstrap的

PS：您不应在输入中使用相同的ID。

Lets assume I have a very simple application that only has 8 inputs grouped in 2 Panels (4 inputs | 4 inputs - see picture bellow) and based on these, I plot a small plot (easy peasy).

The problem that I face is that I want to have the labels only for the first panel, and on the left of the textInput box.

e.g. (Please excuse my sloppy image editing!)

Any suggestion?

My MWE for Figure 1 output:

library(shiny)
ui<-shinyUI(fluidPage(
  wellPanel(
    tags$style(type="text/css", '#leftPanel { max-width:300px; float:left;}'),
    id = "leftPanel",
    textInput("Population1000", 'Population 1000',"15"),
    textInput("Area1000",'Area  1000', "20"),
    textInput("GNI1000", 'GNI 1000', "2314"),
    textInput("GDP1000", "GDP 1000", "1000")
  ),
  wellPanel(
    tags$style(type="text/css", '#RightPanel { max-width:300px; float:left;}'),
    id = "RightPanel",
    textInput("Population2000", 'Population 2000',"15"),
    textInput("Area2000",'Area 2000', "20"),
    textInput("GNI2000", 'GNI 2000', "2314"),
    textInput("GDP2000", "GDP 2000", "1000")
  )
)
)
server<-shinyServer(function(input, output) {NULL})
shinyApp(ui,server)

解决方案

Hi you can try to use Bootstrap's horizontal form, look at the code below, it create 3 columns of width 4 each. You can change width in class = "col-sm-4 control-label" for labels, and in width = 4 for inputs.

library("shiny")
ui <- fluidPage(

  fluidRow(
    column(

      width = 4,

      tags$form(
        class="form-horizontal",

        tags$div(
          class="form-group",
          tags$label(class = "col-sm-4 control-label", `for` = "Population1000", br(), "Population"),
          column(width = 4, textInput(inputId = "Population1000", label = "Year 1000", value = "15")),
          column(width = 4, textInput(inputId = "Population2000", label = "Year 2000", value = "15"))
        ),

        tags$div(
          class="form-group",
          tags$label(class = "col-sm-4 control-label", `for` = "Area1000", "Area"),
          column(width = 4, textInput(inputId = "Area1000", label = NULL, value = "20")),
          column(width = 4, textInput(inputId = "Area2000", label = NULL, value = "20"))
        ),

        "..."

      )
    )
  )

)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Result :

PS : you should not use same ids for inputs.

这篇关于闪亮：标签位置，文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！