r语言 - 如何在闪亮的应用程序中获得与常规文本内联的veratimtextoutput ?

Question

在运行这个简单的应用程序时，我遇到了一个问题，其中-分数的verbatimTextOutput与输出文本框之间没有正确对齐(或者可能相反)。我知道verbatimTextOutput包括HTML前标记中的文本，当我检查元素时，我可以看到它正在为文本框输出分配某种底边距。当我使用inspect元素删除这个前标签的边距时，文本框会与-完美对齐。。如何将其设置为默认值?

我该怎么做呢?

?

library(shiny)
A <- c(1,2,3,4,5,6,7)
B <- c(1,2,3,4,5,6,7)
uiMatchup <- fluidPage(
fluidRow(
column(3,
selectInput(
inputId = "Away",
label = h3("Away Team"),
choices = c(A, B)),
align="center"),
column(3,
selectInput(
inputId = "Home",
label = h3("Home Team"),
choices = c(A,B)
),
align="center",
offset=6)
),

br(),

fluidRow(
column(5,
verbatimTextOutput("Team1Score"),
align="center"),
column(2, 
h3("-"),
align="center"),
column(5,
verbatimTextOutput("Team2Score"),
align="center")
)
)
serverMatchup <- function(input, output) {

output$Team1Score <- renderPrint({
return(cat(paste0(input$Away)))
})
output$Team2Score <- renderPrint({
return(cat(paste0(input$Home)))
}) 

}
shinyApp(ui = uiMatchup, server = serverMatchup)

Answer 1

我终于回答了我自己的问题。我简单地创建了一个renderText输出，它只是一个破折号，然后为破折号textOutput创建了一个标签，在那里我手动设置破折号的位置，使其与其他输入水平和垂直对齐。

library(shiny)
A <- c(1,2,3,4,5,6,7)
B <- c(1,2,3,4,5,6,7)
uiMatchup <- fluidPage(
fluidRow(
column(3,
selectInput(
inputId = "Away",
label = h3("Away Team"),
choices = c(A, B)),
align="center"),
column(3,
selectInput(
inputId = "Home",
label = h3("Home Team"),
choices = c(A,B)
),
align="center",
offset=6)
),

br(),

fluidRow(
column(5,
verbatimTextOutput("Team1Score"),
align="center"),
column(2, 
textOutput("Dash"),
align="center"),
column(5,
verbatimTextOutput("Team2Score"),
align="center")
),
tags$style(type='text/css', "#Dash { width:100%; margin-top:-10px; font-size: 40px;
font-style: bold;}")
)
serverMatchup <- function(input, output) {

output$Team1Score <- renderPrint({

return(cat(paste0(input$Away)))
})

output$Team2Score <- renderPrint({

return(cat(paste0(input$Home)))
})

output$Dash <- renderText({"-"
})

}
shinyApp(ui = uiMatchup, server = serverMatchup)