如何在 Shiny 和 Shinydashboard 中自定义 HTML 文本和 verbatimTextOutput 之间的空间答案

【问题标题】：How to customize the space between an HTML text and verbatimTextOutput in Shiny and Shinydashboard如何在 Shiny 和 Shinydashboard 中自定义 HTML 文本和 verbatimTextOutput 之间的空间
【发布时间】：2020-02-24 07:07:55
【问题描述】：

这是我上一个问题 (How to change the width and height of verbatimTextOutput in Shiny and Shinydashboard) 的后续问题。我想创建一个verbatimTextOutput 看起来和textInput 一样。下面是一个例子。

现在除了标题和文本框之间的空格外，几乎所有内容都相同，如红线所示。我正在使用带有strong 函数的一行文本来模仿textInput 中的标题。有没有办法增加这一行和erbatimTextOutput, making the appearance as the same as thetextInput`之间的空间？

代码

# 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;
        width: 300px; 
        max-width: 100%;
        padding: 6px 12px; 
        white-space: pre-wrap;
        }

        "
            )
          ),
          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)
        )
      )
    )
  )
)

server <- function(input, output, session){
  output$txt1_out <- renderText({
    input$txt1
  })
}

# Run the app
shinyApp(ui, server)

【问题讨论】：

标签： html css r shiny shinydashboard

【解决方案1】：

您可以将margin-top: 7px;添加到：

#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;
margin-top: 7px;
}

你可以使用这个值（6px？）。我首先使用 Chrome DevTools 检查了Text input no.1，它有：

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

我尝试匹配 margin-bottom: 5px，但元素在所有方面都不相同，这就是我选择 7px 的原因。

【讨论】：