Shiny：在 textInput 中对齐文本

Posted 2023-04-18

【中文标题】Shiny：在 textInput 中对齐文本

【英文标题】：Shiny: Align text in textInput

【发布时间】：2019-04-04 02:39:16

【问题描述】：

我有一个带有输入字段 (textInput) 的闪亮应用程序。我想将输入文本向右对齐。在 CSS 中，它类似于 text-align: right;。有人知道我可以这样做吗？

您可以在下面找到一个代码示例。

ui <- fluidPage(
  textInput("text", "Enter your text here")
)
server <- function(input, output) 
  output$value <- renderText( input$text )

shinyApp(ui, server)

【问题讨论】：

您希望textInput 字段位于右侧还是在textInput 中从右侧插入文本？

文本的插入应该从textInput的右侧开始

【参考方案1】：

我认为应该有一种方法可以向textInput 添加样式参数，以便您可以将style="text-align: right" 传递给textInput。无论如何，这是一种方法-

ui <- fluidPage(
  html(
    '<div class="form-group shiny-input-container">
      <label for="text">Enter text here</label>
      <input id="text" type="text" style="text-align: right" class="form-control" value=""/>
      </div>'
  ),
  textOutput("value")
)
server <- function(input, output) 
  output$value <- renderText(
    input$text
  )

shinyApp(ui, server)

我这样做的方法只是在控制台中获取textInput("text", "Enter your text here") 的输出，然后手动将style 属性添加到<input>。对于重复使用，您可以将其转换为一个函数并将其称为 right_textInput() 或其他名称。

---

另一种方法是将css 添加到您的inputId，在本例中为#text。但是，您必须为要右对齐的每个 textInput 执行此操作 -

ui <- fluidPage(
  tags$head(tags$style(HTML("#text text-align: right")))
  textInput("text", "Enter text here"),
  textOutput("value")
)
server <- function(input, output) 
  output$value <- renderText(
    input$text
  )

shinyApp(ui, server)

【参考方案2】：

要获取fluidRow 右侧的textInput，请使用以下示例。

    library(shiny)
    ui <- fluidPage(
      fluidRow(textInput("text", "Enter your text here"), align = 'right')
    )
    server <- function(input, output) 
      sampleText <- renderText(input$text )
    
    shinyApp(ui, server)

【参考方案3】：

可以申请css，见https://shiny.rstudio.com/articles/css.html 在 HTML 中，文本输入的 ID 应为 'text