Как изменить ширину и высоту verbatimTextOutput в Shiny и Shinydashboard

Question

В этом примере я хотел бы сделать ширину высоты verbatimTextOutput ( Текстовый вывод №1 ) такой же, как у textInput ( Текстовый ввод no0,1 ). Моя конечная цель - сделать внешний вид textInput и verbatimTextOutput абсолютно одинаковым. Чтобы добиться этого, я задал несколько вопросов о том, как изменить угловой угол ( Почему shinydashboard меняет угол числового ввода с круглого на 90 градусов? ) и как изменить семейство шрифтов verbatimTextOutput( Как изменить семейство шрифтов verbatimTextOutput таким же, как для ввода в Shiny и Shinydashboard? ). Изменение ширины и высоты является последней частью головоломки.

Я также продемонстрировал обходной путь, как Вывод текста №. 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;
        }

        "
    )
  )
)