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>

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

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

转载于:https://www.cnblogs.com/longshiyVip/p/4643572.html

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

jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 def ...
easyui html5主题,详解easyui 切换主题皮肤
1.需要导入的文件(我这里的easyui是jquery-easyui-1.6.11版本) 主要实现原理就是换导入css文件,这样就可以实现切换主题皮肤 2.前台页面定义了一个按钮(代码) 更换皮肤 d ...
苹果cms如何手动更换主题
用苹果cms把网站建设好之后,如果我们不太喜欢初始网站模板或者用了一定时间后想给网站换一个设计风格的情况下怎么更换网站模板呢?今日就把这个操作方法传授给刚出道的菜鸟们.在这里的前提条件是确认你拥有早已 ...
Hexo+Github+Vscode搭建个人博客内含添加图片和更换主题
本文导航 0. 环境配置 1. 连接GitHub 2. 创建Github Pages仓库 3. 本地安装Hexo博客程序 4. Hexo初始化和本地预览博客目录结构 5. 部署Hexo到Github ...
EasyUI切换主题风格
实现EasyUI切换主题. 参考文档如下: https://www.jeasyui.net/extension/209.html https://www.runoob.com/jeasyui/ext- ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
Extjs 更换主题（转载）
转自http://www.wenhaozhong.com/27.html 这里基于 Extjs4.2(发文时官方刚发布了最新版5.0) 进行开发的,更换主题后,主题信息保存在本地 cookie 中,如 ...
linux mint 图标主题_如何在 Linux Mint 中更换主题
一直以来,使用 Cinnamon 桌面环境的 Linux Mint 都是一种卓越的体验.这也是为何我喜爱 Linux Mint的主要原因之一. -- It's Foss(作者) 一直以来,使用 Cin ...
主题图标_iPhone一键更换主题、图标神器
iOS图标虽然是经典,但是看久了也是会腻的.今天教大家一个简单的方法,来更换iPhone的图标. 更换主题.图标教程前往App Store搜索[moloko]进行下载安装,这是一款可以替iPhone ...
linux mint 主题切换,详解如何在 Linux Mint 中更换主题
一直以来,使用 Cinnamon 桌面环境的 Linux Mint 都是一种卓越的体验.这也是为何我喜爱 Linux Mint的主要原因之一. 自从 Mint 的开发团队开始更为严肃的对待设计, &q ...

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

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

最新文章

热门文章