【问题标题】:Buttons moving when border color changed当边框颜色改变时按钮移动
【发布时间】:2016-04-13 15:25:56
【问题描述】:

我有这个页面:http://new.unreal-designs.co.uk/quote/

如果您点击一个字段然后再点击它,它会变成红色,因为它的验证失败,但底部的按钮似乎会移动。

我正在使用http://www.formvalidator.net/ 插件进行验证。

谁能告诉我是什么导致按钮移动?

由于源代码太大而被删除,可以在http://bit.do/bVpn9看到

【问题讨论】:

    标签: jquery html css jquery-plugins


    【解决方案1】:

    当表单验证并抛出错误时,在按钮之后由 JS 插入到 DOM 中的 span 错误消息。

    EG。

    <span class="help-block form-error">You have not given a correct e-mail address</span>
    

    大概这条消息会改变长度,因此会跳来跳去。

    你看不到,因为有规则

    body span {
        opacity: 0;
    }
    

    这并没有改变,也许应该如此。

    添加新规则

    span.help-block.form-error {
        opacity: 1;
        display: block;
    }
    

    这将使消息可见并将其移动到按钮下

    【讨论】:

    • 我添加了一条规则以将显示设置为无,因为我不希望出现错误消息 atm,但是是的,我明白了。谢谢。
    【解决方案2】:

    似乎是因为错误跨度出现在按钮的右侧。我猜想整个 div 都是居中的,而不仅仅是按钮。这会导致按钮向右移动。

    此时不透明度为0。

        body span {
            opacity: 0;
        }
    

    如果你把它变成

        body span {
            opacity: 1;
        }
    

    您可以清楚地看到它为什么会发生变化。如果您打算显示消息,则解决方案是更改不透明度。如果您根本不想显示消息并希望确保按钮不会向左移动,您应该停止代码显示错误范围或(如果您不知道如何执行此操作)添加一个

        style='display:none;' 
    

    到跨度。这可以如上所示内联完成,也可以在 style.css 文件中完成。

    【讨论】:

    • @Paulie_D 给出的答案相同。 JS.
    【解决方案3】:

    你有一个 span 类,当填写代码出错时会显示:

    <span class="help-block form-error">You have not given a correct e-mail address</span>
    

    虽然您将不透明度设置为 0,但文本仍然存在。

    body span {
        opacity: 0;
    }
    

    因此,您必须更改控制“错误”类并添加到跨度文本中的任何 jQuery 或插件。

    不过,如果您想要临时修复,请将其添加到您的 css 中,它会阻止按钮移动。

    body span {
        display: none;
        opacity: 0;
    }
    

    这将删除跨度文本,但建议您进入插件并在那里进行编辑。

    【讨论】:

    • @Paulie_D 给出的答案相同。 JS.
    • 答案不一样。 Paulie 的回答使文本可见。此解决方案使文本不显示。
    • 同样的逻辑,这就是我要说的。他发现了问题,我可以做基本的 CSS 来解决我想要的问题。不是说你做错了什么,只是在他发布后 4 分钟指出,然后你发布了与该问题相同的答案,这正是我所要求的。此外,您的答案将隐藏所有跨度......不是它自己的错误跨度。
    猜你喜欢
    • 2018-04-19
    • 1970-01-01
    • 1970-01-01
    • 2022-01-09
    • 2016-01-07
    • 1970-01-01
    • 2018-12-27
    • 1970-01-01
    相关资源
    最近更新 更多