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

Question

在这个例子中，我想使 verbatimTextOutput(Text output no.1)的宽度和高度与 textInput 相同(文本输入 1)。我的最终目标是使 textInput 和 verbatimTextOutput 的外观完全相同。为实现这一点，我问了几个问题，例如如何更改 Angular Angular (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?)。更改宽度和高度是拼图的最后一 block 。

我还演示了一种解决方法，如 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)

Answer 1

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

2. 我没有完全理解你的问题，但如果你想换行，那么你可以使用 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;
        }

        "
    )
  )
)