abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理五 (二十三)
abp(net core)+easyui+efcore实现仓储管理系统目录
abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一)
abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)
abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)
abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)
abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务(五)
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器(六)
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图(八)
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试(九)
abp(net core)+easyui+efcore实现仓储管理系统——多语言(十)
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十一)
abp(net core)+easyui+efcore实现仓储管理系统——菜单-上 (十六)
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理一 (十九)
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理二 (二十)
现在我们已经实现了我们想要实现的功能,但是这些功能还不完美。如果是细心的读者,在看上一篇文章(abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理四 (二十二) )时会发现一些我们需要的复选框并没有出现在我们想要它出现的位置。如下图中红框处,我们想要出现一个复选框,但实现上却没有出现。下面我们来解决这个问题。
十四、样式冲突
1. 首先,我们在Visual Studio 2017中按F5运行应用程序。
2.在浏览器中的地址栏中输入“http://localhost:5000/”,然后输入管理员用户名进行登录。
3.在主界面的菜单中,选择“Business->货物管理”菜单项,浏览器中呈现一个货物信息列表与四个按钮。如下图。你会发现这个列表有问题。如下图红框处,没有复选框。
4.我们在浏览器(Firefox)在复选框的位置,使用单击鼠标右键,在弹出菜单中选中“查看元素”,如下图。然后我们看到在html代码中是有复选框的相关代码的,但是却没有在页面中显示。我们来看一下这个复选框的样式,如下图中的红框处,原来checkbox元素的样式表冲突了。此处的Checkbox元素的样式并不是我们想要的是EasyUI.css中的样式定义,而实际上却使用了materialize.css样式表中的样式定义。造成了这个Checkbox元素左移了-9999px像素,变的不可见了。
5. 知道了问题原因,我们可以直接在Firefox调试器中修改一下样式,把样式中的left的值由-9999px修改为1px,opacity的值由0改为2,如下图红框处,然后我们需要的复选框就出现在我们想要的位置。如下图。
![](https://img2018.cnblogs.com/blog/10343/201910/10343-20191022113412703-1619999297.png)
6. 那应该如何来解决这个问题呢?仔细观察调试器中的HTML代码,发现Checkbox外面还有一层DIV,这行DIV的class名称为“datagrid-cell-check”。这个发现,我们就有办法解决这个样式冲突问题了。在Visual Studio 2017的“解决方案资源管理器”中,找到“ABP.TPLMS.Web.MVC”项目的“wwwroot\lib\easyui-1.8\themes\bootstrap”文件夹中找到easyui.css文件,在这个文件中添加如下样式。代码如下。
.datagrid-header-check input[type=checkbox], .datagrid-cell-check input[type=checkbox] { position: absolute; left: 5px; opacity: 1; margin: 0; padding: 0; width: 15px; height: 18px; }
7.在浏览器中先访问一下其他页面,然后再来访问货物信息列表,此时列表的复选框出现了。如下图。
相关文章
- 深度学习-LeNet(第一个卷积神经网络)
- Java跨域-Redirect的跨域问题解决
- 十年前,AlexNet就预定了今天的NeurIPS 2022时间检验奖
- 无需新型token mixer就能SOTA:MetaFormer视觉基线模型开源,刷新ImageNet记录
- 推荐一款神仙颜值的Redis客户端工具
- 首个在ImageNet上精度超过80%的二值神经网络BNext问世,-1与+1的五年辛路历程
- Redis+Guava,性能炸裂!这组合真的太顶了....
- 【eureka问题:已解决】Request execution failed with message: java.net.ConnectException: Connection refused:
- 【已解决】Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon runnin
- 【已解决】springboot在使用redisTemplate的测试的时候报空指针
- 差两个像素让我很难受,这问题绝不允许留到明年!
- React DevUI 18.0 正式发布🎉
- 好慌,我代码没了!不会是变基变出问题了吧?
- 老板:你为什么要选择 Vue?
- 实用的 Bash 快捷键
- Quill基本使用和配置 - DevUI
- Quill富文本编辑器的实践 - DevUI
- 如何解决异步接口请求快慢不均导致的数据错误问题? - DevUI
- 让我们一起建设 Vue DevUI 项目吧!🥳
- 号外号外!DevUI Admin V1.0 发布啦!