How to change the width and height of verbatimTextOutput in Shiny and Shinydashboard

Question

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)

Answer 1

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

        "
    )
  )
)