这是我上一个问题 ( How to change the width and height of verbatimTextOutput in Shiny and Shinydashboard ) 的后续问题。我想创建一个看起来与 textInput
相同的 verbatimTextOutput
。下面是一个例子。
现在除了标题和文本框之间的空格(如红线所示)外,几乎所有内容都相同。我使用带有 strong
函数的一行文本来模仿 textInput
中的标题。有没有办法增加此行和 erbatimTextOutput 之间的空间,使外观与
textInput` 相同?
代码
# 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)
最佳答案
您可以将 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 的原因。
关于html - 如何在 Shiny 和 Shinydashboard 中自定义 HTML 文本和 verbatimTextOutput 之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58600719/