作成日: 2016/12/05 最終更新日: 2017/05/12
文書種別
制限事項
詳細
マウスカーソルのある行のcssClassを設定し、背景色を変更する処理とした場合、FlexGrid上の行をまたぐようにマウス移動するたびに再描画処理が行われて、ちらつきが発生します。
ちらつきは、テンプレートセルを使用している場合に特に顕著に表れます。
この現象は制限事項です。
行のcssClassを設定した場合、再描画が行われます。
ちらつきは、テンプレートセルを使用している場合に特に顕著に表れます。
この現象は制限事項です。
行のcssClassを設定した場合、再描画が行われます。
回避方法
下記コードのようにCSSを設定します。
◆サンプルコード（CSS）
----------------------------------
#hoverRow [wj-part=cells] {
overflow: hidden;
}
#hoverRow .wj-cell:not(.wj-header):hover {
overflow: visible;
}
#hoverRow .wj-cell:not(.wj-header):after {
content: '';
position: absolute;
top:0;
left:-10000px;
width:20000px;
height:100%;
z-index: 1;
pointer-events: none;
background: transparent;
transition: all;
}
#hoverRow .wj-cell:not(.wj-header):hover:after {
background: rgba(0,150,0, 0.15);
transition: all;
}
----------------------------------
◆サンプルコード（HTML）
----------------------------------
<wj-flex-grid id="hoverRow" control="flex" items-source="data">
...
...
...
</wj-flex-grid>
----------------------------------
◆サンプルコード（CSS）
----------------------------------
#hoverRow [wj-part=cells] {
overflow: hidden;
}
#hoverRow .wj-cell:not(.wj-header):hover {
overflow: visible;
}
#hoverRow .wj-cell:not(.wj-header):after {
content: '';
position: absolute;
top:0;
left:-10000px;
width:20000px;
height:100%;
z-index: 1;
pointer-events: none;
background: transparent;
transition: all;
}
#hoverRow .wj-cell:not(.wj-header):hover:after {
background: rgba(0,150,0, 0.15);
transition: all;
}
----------------------------------
◆サンプルコード（HTML）
----------------------------------
<wj-flex-grid id="hoverRow" control="flex" items-source="data">
...
...
...
</wj-flex-grid>
----------------------------------
旧文書番号
81895