时间戳

首页 > 解决方案 > 如何删除 textInput 和错误消息之间的边距

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

问题描述

我尝试创建带有字段验证的应用程序，但边距有问题。

问题是我不能使textInput（电子邮件）和uiOutput（错误消息）之间的边距更小。我已经尝试过更改错误消息的边距和填充，但它没有帮助。

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

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

在此处输入图像描述

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

在此处输入图像描述

如果我在浏览器中检查代码，它会显示 margin-bottom 15 px：

在此处输入图像描述

代码是：

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)

标签： htmlcssrshiny

解决方案

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

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

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

推荐阅读