如何删除 textInput 和错误消息之间的边距

Question

我尝试使用字段验证创建应用程序，但在边距方面遇到问题。

问题是我不能在textInput (Email) 和uiOutput (error message) 之间缩小更小的边距。 我已经尝试过更改错误消息的边距和填充，但没有帮助。

我需要在这个简化版本中得到什么：

1. 它们之间有两个具有正常距离（15 像素）的字段。 当没有错误信息时，我需要保持相同的距离。

2. 当我单击“注册”按钮时，它会进行验证，如果用户名为空，则会显示错误：

如果我在浏览器中检查代码，它会显示边距底部 15 像素：

代码是：

library(shiny)
library(shinyalert)

ui <- fluidPage(
  titlePanel("Error test"),
  tags$head(tags$style(HTML("
        /* errors */
        .shiny-output-error-validation {
        color: #ff0000;
        font-size: 13px;
        margin-bottom: 7px;
        margin-top: 0px;
        padding-top: 0px;
        font-weight: bold
        }
      "))),

  mainPanel(
    textInput("user_name", "Username (Email):", ),
    uiOutput("error_email"),
    textInput("bla", "Test:"),
        actionButton("register_button", "Register")
  )
)

server <- function(input, output) {
  observeEvent(input$register_button, {
    if (input$user_name != "") {
      shinyalert("Your registration was successfull")
    } else {
      output$error_email <- renderUI({

          validate(
          need(
            input$user_name != "",
            paste("Email Address: Please Input a valid E-mail address")
          )
        )
      })
    }
  })
}

shinyApp(ui = ui, server = server)

Answer 1

在错误消息的元素上应用负边距顶部可能是解决此问题的正确方法。 请检查下面的代码。

如果错误消息元素中的类是“errormessage”，则以下将是 css 代码。

.errormessage {
margin-top: -15px;
}