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

【问题标题】：How to change the width and height of verbatimTextOutput in Shiny and Shinydashboard如何在 Shiny 和 Shinydashboard 中更改 verbatimTextOutput 的宽度和高度
【发布时间】：2020-02-23 09:38:38
【问题描述】：

在这个例子中，我想让verbatimTextOutput（Text output no.1）的高度宽度和textInput（Text input 1号）。我的最终目标是让textInput 和verbatimTextOutput 的外观完全一样。为了实现这一点，我问了几个问题，例如如何更改角角 (Why shinydashboard changes the corner of a numericInput from round to 90 degree?)，以及如何更改 verbatimTextOutput (How to change the font family of verbatimTextOutput to be the same as the input in Shiny and Shinydashboard?) 的字体系列。更改宽度和高度是难题的最后一部分。

我还演示了一个解决方法，即 Text output no。 2，这是一个textInput，但在这个答案中显示为只读模式（https://stackoverflow.com/a/58585251/7669809）。但是，我认为这个策略太复杂了。如果能直接修改verbatimTextOutput的宽高就好了。

代码

# 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)

【问题讨论】：

标签： html css r shiny shinydashboard

【解决方案1】：

如果您检查textInput 的样式，您会发现width、max-width 和padding 的详细信息。
我没有完全理解你的问题，但如果你想换行，那么你可以使用white-space: pre-wrap;

所以把所有这些都放在HTML 中，你的tags$style 会是这样的：

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;
        }

        "
    )
  )
)

【讨论】：