E8-浏览控件撑爆了单元格导致表单变形怎么处理

起因

这个问题是之前就困扰我的问题。情况如题目所说，明明编辑的很规整的流程节点表单，在新建流程界面和表单预览界面就变得七扭八歪。觉得文字表述不够直观的小伙伴，请见图1和图2。

该问题仅存在于拥有这类控件的可编辑权限的步骤，只读权限步骤的表单没有类似问题。

图1 表单的预览界面

图2 表单的编辑界面

 

经过

 翻翻代码，找找原因。看来是这个DIV的min-width导致了层的宽度超过了单元格的宽度，导致表格变形了。原因找到就好办了，那就看有什么方法能改变它。

图3 控件的代码

 方法1：设置自定义属性

这个自定义属性，我的理解是设置单元格的属性。先尝试一下能不能用单元格的宽度约束控件的宽度吧。

图4 自定义属性界面

图5 自定义属性影响的代码

这么看，这个自定义属性是调到了了<td>的下一层的DIV标签上的。 尝试了多种定义宽度的方法，其中如果设置max-width:100px;或者width:100px;，单元格确实是不会撑爆了，可是控件会悬浮在单元格之上，挡往了右侧单元格的内容。抛开能不能定义其它属性，把控件拉回到单元格里面不谈，单单到底要给width设置宽度多少，还需要计算，计算的精确不精确，一系列的问题足足逼死强近症的存在。

图6 错误的设置了自定义属性

 那有没有一种方法能彻底的解决这个问题呢。我写在结果里吧。

结果

方法2：插入一段JS吧。

分析了一下表单预览里的HTML，确定了改造的目标，部门和人员选择控件，决定了宽度的都是class="e8_os"的层，处理它的CSS就好了。把min-width:210px;想办法给去掉。去掉的办法是用一个新值来覆盖它。先后尝试了用min-width', '100%‘和min-width', '0px'来覆盖它。个人推荐用min-width', '100%‘，这么写，控件会填充满单元格，会更加美观。形似图7里的“申请人”的样子。达到了我想要的效果。

图7 改造目标和结果对比

 以下是代码，在页面加载完成之后用JQUERY去修改指定的容器的CSS属征性。

成品源码

<script type="text/javascript"> jQuery(document).ready(function() {   $('.e8_os').css('min-width', '100%'); // $('.e8_os').css('min-width', '0px'); }) </script>

后记

其实，在遇到这个问题的时候，我是有想过去找找看哪个文件里写了关于min-width:210px;的，老实说，在处理的过程中就没想起这事儿来。后来想想，还是插入JS的方法会好一些，虽然每个表单里都要做一次，但不涉及改泛微的代码，还是利大于弊的。

再浅介绍一下我的表单是怎么画的。纵向的表单，我设置12列，列宽62像素，合计744像素。不论一行里放两个字段，还是三个字段，都有排版的可能。老实讲，后期发现，泛微在打印表单的时候是会自动缩放的。正文字体是12pt宋体，这里考虑的是本公司员工年龄偏大，字体小了看起来吃力。

好了，今天就写到这儿了。虽然代码量很少，但也希望对小伙伴们有所帮助。还是那句话，喜欢的小伙伴们请关注、点赞、评论。大家的鼓励是我持续创作的动力。感谢！