如何在Shiny和Shinydashboard中更改verbatimTextOutput的宽度和高度

问题描述

在此示例中，我想将 verbatimTextOutput (文本输出1号)的高度宽度与 textInput相同(文本输入1 ).我的最终目标是使 textInput 和 verbatimTextOutput 的外观完全相同.为此，我问了几个问题，例如如何更改转角(

代码

 #加载软件包图书馆(闪亮)图书馆(shinydashboard)# 用户界面ui< -dashboardPage(标头=仪表板标头(标题=")，侧边栏=仪表板sidebarMenu(menuItem(文字=示例"，tabName ="tab1")))，正文= dashboardBody(tabItems(tabItem(tabName ="tab1"，标签$ head(标签$ style(HTML(".form-control {border-radius:4px 4px 4px 4px;}#txt1_out {字体家族:"Source Sans Pro"，"Helvetica Neue"，Helvetica，Arial，sans-serif；font-size:14px;}"))，tags $ script(Shiny.addCustomMessageHandler('selectText'，function(message){$('#txt2_out').prop('readonly'，true);});"))，柱子(宽度= 4，textInput(inputId ="txt1"，标签=文本输入1"，值="abcde12345")，strong(文本输出1号")，verbatimTextOutput(outputId ="txt1_out"，占位符= TRUE)，textInput(inputId ="txt2"，标签=文本输入2"，值="abcde12345")，textInput(inputId ="txt2_out"，标签=文本输出2"))))))服务器<-功能(输入，输出，会话){输出$ txt1_out<-renderText({输入$ txt1})watchEvent(input $ txt2，{updateTextInput(session，inputId ="txt2_out"，值= input $ txt2)session $ sendCustomMessage("selectText"，"select")})}#运行应用ShinyApp(用户界面，服务器) 

解决方案

1. 如果检查 textInput 的样式，则会发现 width ， max-width 和 padding 详细信息.

2. 我没有完全关注您的问题，但是如果您要换行，则可以使用 white-space:pre-wrap;

因此，将所有这些内容都放入 HTML 中，您的 tags $ style 将类似于:

  tags $ head(标签$ style(HTML(".form-control {border-radius:4px 4px 4px 4px;}#txt1_out {字体家族:"Source Sans Pro"，"Helvetica Neue"，Helvetica，Arial，sans-serif；font-size:14px;宽度:300像素；最大宽度:100％；内边距:6px 12px;空白:预包装；}"))) 

In this example, I would like to make the width of the height of the verbatimTextOutput (Text output no.1) as the same as the textInput (Text input no.1). My ultimate goal is to make the appearance of the textInput and verbatimTextOutput completely the same. To achieve this, I have asked several questions as how to change the corner angle (Why shinydashboard changes the corner of a numericInput from round to 90 degree?), and how to change the font family of verbatimTextOutput (How to change the font family of verbatimTextOutput to be the same as the input in Shiny and Shinydashboard?). Changing the width and height is the final piece of the puzzle.

I also demonstrated a workaround as Text output no. 2, which is a textInput but in read-only mode as this answer shows (https://stackoverflow.com/a/58585251/7669809). However, I think this strategy is too complicated. It would be great if I can directly modify the width and height of verbatimTextOutput.

Code

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      )
    )
  ),
  body = dashboardBody(
    tabItems(
      tabItem(
        tabName = "tab1",

        tags$head(
          tags$style(
            HTML(
                "
                .form-control {
                    border-radius: 4px 4px 4px 4px;
                }

                #txt1_out {
                font-family:  'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
                font-size: 14px;
                }

                "
            )
          ),
          tags$script("
            Shiny.addCustomMessageHandler('selectText', function(message) {
              $('#txt2_out').prop('readonly', true);
            });
            ")
        ),
        column(
          width = 4,
          textInput(inputId = "txt1", label = "Text input no.1", value = "abcde12345"),
          strong("Text output no.1"),
          verbatimTextOutput(outputId = "txt1_out", placeholder = TRUE),
          textInput(inputId = "txt2", label = "Text input no.2", value = "abcde12345"),
          textInput(inputId = "txt2_out", label = "Text output no.2")
        )
      )
    )
  )
)

server <- function(input, output, session){
  output$txt1_out <- renderText({
    input$txt1
  })
  observeEvent(input$txt2, {
    updateTextInput(session, inputId = "txt2_out", value = input$txt2)
    session$sendCustomMessage("selectText", "select")
  })
}

# Run the app
shinyApp(ui, server)

解决方案

1. If you check styles for textInput, you will find width, max-width and padding details.

2. I don't fully follow your question but if you want to wrap text then you can do this using white-space: pre-wrap;

So putting all of these in HTML, your tags$style will be something like:

tags$head(
  tags$style(
    HTML(
      "
        .form-control {
            border-radius: 4px 4px 4px 4px;
        }

        #txt1_out {
        font-family:  'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 14px;
        width: 300px;
        max-width: 100%;
        padding: 6px 12px;
        white-space: pre-wrap;
        }

        "
    )
  )
)

这篇关于如何在Shiny和Shinydashboard中更改verbatimTextOutput的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！