前几日修改一个网页,发现设置css position为fixed居然起不到任何作用
元素无法被固定,会随着滚动条的滚动而移动走
后来发现把body中的perspective属性去掉就好了,包括 -webkit-perspective 和 -moz-perspective
前几日修改一个网页,发现设置css position为fixed居然起不到任何作用
元素无法被固定,会随着滚动条的滚动而移动走
后来发现把body中的perspective属性去掉就好了,包括 -webkit-perspective 和 -moz-perspective
Handsontable的初始化代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Define element var hot_populate = document.getElementById('hot_populate') // Initialize with options var hot_populate_init = new Handsontable(hot_populate, { data: hot_populate_data, startRows: 8, startCols: 5, minSpareRows: 1, colHeaders: true, rowHeaders: true, stretchH: 'all', contextMenu: true, }); |
这时,如果我们编辑表格自动生成的最后一行,就会发现只要输入的文本长度比较短,整个表格会因为当前列的宽度问题而发生错位。
经过各种搜索,我也没有发现什么好的解决方案,只能采用了一种每次在创建新行后刷新表格绘制的方法。而且实现的过程也比较绕远,不过问题最终还是解决了。如果有更好的办法,欢迎大家分享给我。
首先,打开handsontable.min.js,在文件开头加入
1 |
var mydansunFixNewColWidth = new Event('mydansunFixNewColWidth'); |
然后,往下查找 instance.draw()
你会找到下面这行代码
1 |
n.addEventListener(window,"resize",function(){"none"!==t.instance.getSetting("stretchH")&&t.instance.draw()}), |
然后把下面这行代码添加到上面那行代码的后面(注意上面那行代码最后有个逗号)
1 |
n.addEventListener(window,"mydansunFixNewColWidth",function(){"none"!==t.instance.getSetting("stretchH")&&t.instance.draw()}), |
最后,我们修改之前Handsontable的初始化代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Define element var hot_populate = document.getElementById('hot_populate') // Initialize with options var hot_populate_init = new Handsontable(hot_populate, { data: hot_populate_data, startRows: 8, startCols: 5, minSpareRows: 1, colHeaders: true, rowHeaders: true, stretchH: 'all', contextMenu: true, afterCreateRow:function(index,amount){ var instance = hot_populate_init; if(instance !== undefined){ window.dispatchEvent(mydansunFixNewColWidth); } }, }); |
再返回我们的页面,刷新。现在添加的新行已经可以拥有正确的宽度了,错位的问题也得到了解决。
我们经常遇到这种情况,当我们在一行(row)中放置多个列(col)的时候,新起一行的列因为上面一行有一列超高,位置发生了移动。
bootstrap官方的解决方法是在每一行的末尾,插入下面的div用来清除浮动
1 |
<div class="clearfix visible-xs-block"></div> |
其中, visible-xs-block 是可以改变的,改变成你每个列用的栅格种类,比如你所有的栅格用的是 col-lg-4 (如上图),你就需要改成 visible-xs-block
但是这样,我们需要对每一行都做处理,这不适合下面两种情况
下面我编写了一个js来快速解决这个问题,首先我们把所有需要处理的栅格都加上 col-split 的class,然后把下面的js代码放在合适的位置让他能够执行即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(".col-split").each(function(index, el) { var $this = $(this); var $parent = $this.parent('.row'); if($parent.data("colSplit") === true){ return; } $parent.data("colSplit",true); var classes = $this.attr("class"); var exp = new RegExp(/col-([a-zA-Z]{2})-(\d+)/,"g"); var result; while ((result = exp.exec(classes)) != null){ var visible = "visible-" + result[1] + "-block"; var width = parseInt(12 / parseInt(result[2])); $parent.children('.col-split').each(function(index, el) { var $item = $(this); var number = index + 1; if(number % width == 0){ $item.after('<div class="clearfix ' + visible + '">'); } }); } }); |
添加代码完成后,刷新页面,我们想要的样子就出现了。
上面的js代码支持使用多种栅格的列,比如 col-md-6 col-lg-4 ,他会在合适的位置自动插入,效果如图