作成日: 2015/01/28 最終更新日: 2015/05/21
文書種別
不具合
状況
修正済み
詳細
列の固定と列の仮想化を有効にしてグリッドをスクロールすると、固定された列ヘッダの高さと固定されていない列ヘッダの高さが異なってしまいます。
【再現手順】
1. サンプルを実行します。
結果: すべての列ヘッダが、最も高い列ヘッダ(サンプルでは3列目)と同じ高さで表示されます。
2. スクロールバーを右端まで移動します。
結果: Chromeでは、固定されていない列の高さだけ低くなります。その他のブラウザでは、列の高さは変更されません。
3. ブラウザを最大化して表示します。
結果: すべての列ヘッダの高さが低くなります。
4. スクロールバーを左端まで移動します。
結果: 固定されていない列ヘッダの文字列が切れて表示されます。
【サンプルコード】
$('#wijgrid').width(500).height(500).wijgrid({
data: [
{ Col1: '', Col2: '', 'Long header text': '', Col3: '', Col4: '', Col5: '', Col6: '', Col7: '', Col8: '', Col9: '', Col10: '', Col11: '', Col12: '', Col13: '', Col14: '', Col15: '' },
{ Col1: '', Col2: '', 'Long header text': '', Col3: '', Col4: '', Col5: '', Col6: '', Col7: '', Col8: '', Col9: '', Col10: '', Col11: '', Col12: '', Col13: '', Col14: '', Col15: '' },
{ Col1: '', Col2: '', 'Long header text': '', Col3: '', Col4: '', Col5: '', Col6: '', Col7: '', Col8: '', Col9: '', Col10: '', Col11: '', Col12: '', Col13: '', Col14: '', Col15: '' },
],
scrollingSettings: {
mode: 'both',
staticColumnIndex: 1,
virtualizationSettings: {
mode: 'both',
columnWidth: 100
}
}
});
【再現手順】
1. サンプルを実行します。
結果: すべての列ヘッダが、最も高い列ヘッダ(サンプルでは3列目)と同じ高さで表示されます。
2. スクロールバーを右端まで移動します。
結果: Chromeでは、固定されていない列の高さだけ低くなります。その他のブラウザでは、列の高さは変更されません。
3. ブラウザを最大化して表示します。
結果: すべての列ヘッダの高さが低くなります。
4. スクロールバーを左端まで移動します。
結果: 固定されていない列ヘッダの文字列が切れて表示されます。
【サンプルコード】
$('#wijgrid').width(500).height(500).wijgrid({
data: [
{ Col1: '', Col2: '', 'Long header text': '', Col3: '', Col4: '', Col5: '', Col6: '', Col7: '', Col8: '', Col9: '', Col10: '', Col11: '', Col12: '', Col13: '', Col14: '', Col15: '' },
{ Col1: '', Col2: '', 'Long header text': '', Col3: '', Col4: '', Col5: '', Col6: '', Col7: '', Col8: '', Col9: '', Col10: '', Col11: '', Col12: '', Col13: '', Col14: '', Col15: '' },
{ Col1: '', Col2: '', 'Long header text': '', Col3: '', Col4: '', Col5: '', Col6: '', Col7: '', Col8: '', Col9: '', Col10: '', Col11: '', Col12: '', Col13: '', Col14: '', Col15: '' },
],
scrollingSettings: {
mode: 'both',
staticColumnIndex: 1,
virtualizationSettings: {
mode: 'both',
columnWidth: 100
}
}
});
回避方法
この問題はバージョン3.20151.71で修正されました。
修正版の適用方法については、アップデートの方法を参照してください。
修正版を適用しない場合の回避方法は次のとおりです。
行の高さを明示的に設定します。
<style type="text/css">
.wijmo-wijgrid-headerrow {
height: 80px !important;
}
</style>
修正版の適用方法については、アップデートの方法を参照してください。
修正版を適用しない場合の回避方法は次のとおりです。
行の高さを明示的に設定します。
<style type="text/css">
.wijmo-wijgrid-headerrow {
height: 80px !important;
}
</style>
旧文書番号
81150