首页 > 其他 > 详细

easyui更换主题之后出现validatebox的验证提示信息显示跑偏的解决方案

时间:2015-07-13 20:20:32      阅读:178      评论:0      收藏:0      [点我收藏+]
在easyui中更换主题为非default的主题,有的主题会出现如下图所示的情况,验证提示信息的提示内容跑到了下面。
技术分享
现在说下原因和解决方案:
原因:原因是easyui对某些主题没有进行这个样式的设置,导致这个验证信息会到处跑。
首先,通过firebug可以看到出现上面问题的jsp页面有如下图的html,这段html内容就是提示信息所在的html,可以找到下面的class="validatebox-tip-content"的span,之所以出现验证提示信息乱跑的情况的原因是easyui对某些主题没有进行这个样式的设置,也就是在样式文件里面没有对class="validatebox-tip-content"进行样式设置。
技术分享
其次,接下来看下easyui默认(default)的主题样式,找到默认主题样式default的easyui.css文件,可以找到如下的内容:
.validatebox-tip-content{
    display:inline-block;
    position:absolute;
    top:0px;
    left:10px;
    padding:3px 5px;
    border:1px solid #CC9933;
    background:#FFFFCC;
    z-index:9900001;
    font-size:12px;
}

默认主题里面有这个内容说明easyui的默认主题对验证提示信息进行了样式设置。

现在比如我把主题换到淡粉色(主题名字是metro-red),找到相应的样式文件easyui.css,可以发现在这个文件里面并没有上面的内容,没有上面的内容说明该主题并没有进行这个样式的设置,这就是更换了主题之后为什么验证信息会跑偏的原因所在了。

解决方案:

在出现问题的jsp文件里面添加样式设置内容可解决。例如我出现问题的页面是index.jsp这个页面,那么可以在index.jsp页面的title下面添加下面的内容(具体属性值可以自己改动):

<style type="text/css">
.validatebox-tip-content{
    display:inline-block;
    position:absolute;
    top:110px;
    left:650px;
    padding:3px 5px;
    border:1px solid #CC9933;
    background:#FFFFCC;
    z-index:9900001;
    font-size:12px;
}
</style>

截图如下,添加红框部分即可:

技术分享

添加样式设置之后该问题即可解决了,现在可以自己控制显示的位置。

easyui更换主题之后出现validatebox的验证提示信息显示跑偏的解决方案

原文:http://www.cnblogs.com/longshiyVip/p/4643572.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!