起因
这个问题是之前就困扰我的问题。情况如题目所说,明明编辑的很规整的流程节点表单,在新建流程界面和表单预览界面就变得七扭八歪。觉得文字表述不够直观的小伙伴,请见图1和图2。
该问题仅存在于拥有这类控件的可编辑权限的步骤,只读权限步骤的表单没有类似问题。
![](https://i-blog.csdnimg.cn/blog_migrate/5119d0434d659a32b68ce5c44c60f972.png)
![](https://i-blog.csdnimg.cn/blog_migrate/253181f19437b681e1d6d615cd97f168.png)
经过
翻翻代码,找找原因。看来是这个DIV的min-width导致了层的宽度超过了单元格的宽度,导致表格变形了。原因找到就好办了,那就看有什么方法能改变它。
![](https://i-blog.csdnimg.cn/blog_migrate/e26e4f2dc656d8e7aa437dd8875f2cdd.png)
方法1:设置自定义属性
这个自定义属性,我的理解是设置单元格的属性。先尝试一下能不能用单元格的宽度约束控件的宽度吧。
![](https://i-blog.csdnimg.cn/blog_migrate/32f639a79b53c6e77c2f58a0f5ef8083.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9f8dc6303949f77a7ce97dae21c6d611.png)
这么看,这个自定义属性是调到了了<td>的下一层的DIV标签上的。 尝试了多种定义宽度的方法,其中如果设置max-width:100px;或者width:100px;,单元格确实是不会撑爆了,可是控件会悬浮在单元格之上,挡往了右侧单元格的内容。抛开能不能定义其它属性,把控件拉回到单元格里面不谈,单单到底要给width设置宽度多少,还需要计算,计算的精确不精确,一系列的问题足足逼死强近症的存在。
![](https://i-blog.csdnimg.cn/blog_migrate/42748dd8f96af5ad440bd2092a5bfa55.png)
那有没有一种方法能彻底的解决这个问题呢。我写在结果里吧。
结果
方法2:插入一段JS吧。
分析了一下表单预览里的HTML,确定了改造的目标,部门和人员选择控件,决定了宽度的都是class="e8_os"的层,处理它的CSS就好了。把min-width:210px;想办法给去掉。去掉的办法是用一个新值来覆盖它。先后尝试了用min-width', '100%‘和min-width', '0px'来覆盖它。个人推荐用min-width', '100%‘,这么写,控件会填充满单元格,会更加美观。形似图7里的“申请人”的样子。达到了我想要的效果。
![](https://i-blog.csdnimg.cn/blog_migrate/32b5ad9f0f9aa75b70f3ced55832fb7a.png)
以下是代码,在页面加载完成之后用JQUERY去修改指定的容器的CSS属征性。
<script type="text/javascript"> // $('.e8_os').css('min-width', '0px'); |
后记
其实,在遇到这个问题的时候,我是有想过去找找看哪个文件里写了关于min-width:210px;的,老实说,在处理的过程中就没想起这事儿来。后来想想,还是插入JS的方法会好一些,虽然每个表单里都要做一次,但不涉及改泛微的代码,还是利大于弊的。
再浅介绍一下我的表单是怎么画的。纵向的表单,我设置12列,列宽62像素,合计744像素。不论一行里放两个字段,还是三个字段,都有排版的可能。老实讲,后期发现,泛微在打印表单的时候是会自动缩放的。正文字体是12pt宋体,这里考虑的是本公司员工年龄偏大,字体小了看起来吃力。
好了,今天就写到这儿了。虽然代码量很少,但也希望对小伙伴们有所帮助。还是那句话,喜欢的小伙伴们请关注、点赞、评论。大家的鼓励是我持续创作的动力。感谢!