作成日: 2024/08/20    最終更新日: 2024/08/20

文書種別

不具合

状況

修正済み

詳細

以下のようなCSSを追加して、列ヘッダのハイライトスタイルを変更すると、行ヘッダのハイライトスタイルも変更されます。

<style>
    .gc-columnHeader-highlight {
        color: #4c1081;
        background-image: none;
        background-color: #1587b8;
        border-style: solid;
        border-left-color: #efefef !important;
        border-right-color: #d5ded5 !important;
        border-bottom-color: #ababab !important;
    }
</style>

回避方法

SpreadJS (Ver.17.0.4)で修正済み。

Ver.17.0.4より前のバージョンでは、以下のコードを追加して回避が可能です。

var rowHeaderPaintFn = GC.Spread.Sheets.CellTypes.RowHeader.prototype.paint;
GC.Spread.Sheets.CellTypes.RowHeader.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
    if (context.visualState === GC.Spread.Sheets.VisualState.highlight ||
        context.visualState === GC.Spread.Sheets.VisualState.hover) {
        var addBoldToFont = function (font) {
            var fontParts = font.split(' ');
            if (fontParts.indexOf('bold') === -1) {
                fontParts.unshift('bold');
            }
            return fontParts.join(' ');
        };
        // 行ヘッダーのスタイルを変更
        style.foreColor = "#217346";
        style.backColor = "#e1e1e1";
        style.font = addBoldToFont(style.font);
        context.visualState = GC.Spread.Sheets.VisualState.normal;
    }
    rowHeaderPaintFn.call(this, ctx, value, x, y, w, h, style, context);
}
spread.repaint();