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

在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>

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

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