Question

我一直试图弄清楚如何使用自己的风格自定义列过滤器，但出于某种原因，Google决定将呈现的HTML放在body标记的底部，换句话说：列过滤器的菜单附加到body标签底部控件本身外部的DOM。为什么他们决定把它放在那里？这让我有些不高兴，因为这迫使我在我想要的每个新CSS规则之后放了很多!important;。

我也在Google Docs中读到了如何调用ui.cssClass，但这对我没什么帮助。有没有其他人设法解决这个问题？甚至可以为此创建自己的标记吗？

示例here，您可以看到我的观点。

我会将一些代码放在此处，以便您可以清楚了解此处发生的事情。

JavaScript的：

var columnFilterOptions = {
    filterColumnLabel: 'colLabel',
    ui: {
        caption: "Compare",
        label: false,
        allowTyping: false,
        allowMultiple: true,
        allowNone: false,
        selectedValuesLayout: 'below'
    }
};

HTML：

<div class="colFilter_div"></div>

CSS / LESS：

.charts-menu-button-disabled {
    background: @grayLighter !important;
    opacity: 0.5 !important;
}

.charts-menu-button-outer-box {
    width: 100%;
    border: 0 !important;
}

.charts-menu-button {
    background: @grayLighter !important;
    margin: 0 !important;
    margin-bottom: @smallGutter !important;
}

.charts-menu-button-open {
    background: @blueLight !important;
}

.charts-menu-button,
.charts-menu-button-inner-box {
    color: @grayDark !important;
    width: 100%;
    line-height: 55px;
    border: 0 !important;
    padding: 0 !important;
}

.charts-menu-button:before,
.charts-menu-button-inner-box:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 55px;
    overflow: hidden;
    background: @grayLight;
    text-align: center;
}

.charts-menu-button-open:focus:after {
    content: "";
    display: block;
    position: absolute;
    top: 17px;
    right: 27px;
    background: url(../../content/images/sprites.png);
    width: 7px;
    height: 19px;
    background-position: -31px -90px;
}

.charts-menu-button:after {
    content: "";
    display: block;
    position: absolute;
    top: 17px;
    right: 27px;
    background: url(../../content/images/sprites.png);
    width: 7px;
    height: 19px;
    background-position: -16px -110px;
}

.charts-menu-button-caption {
    .proxima-nova();
    padding-left: @smallGutter !important;
    font-size: 1.1em;
}

.charts-menu-button-dropdown {
    background: none !important;
}

.charts-menu,
.charts-menu-vertical {
    overflow: auto;
    width: auto !important;
    min-width: 11.19% !important;
    margin: 0;
    border: 0 !important;
    background: @grayLighter !important;
    border-top: 2px solid @green !important;
    padding-right: @smallGutter !important;
}

.charts-menuitem-content {
    width: 100%;
    color: @grayDark !important;
    .proxima-nova() !important;
    font-size: 16px !important;
    padding: 10px 0;
    display: block;
    border-top: 2px solid transparent;
}

.charts-menuitem-content:hover {
    color: @blue !important;
    border-top: 2px solid @blue;
}

.charts-menuitem-highlight {
    background: none !important;
    border: 0 !important;
    border-width: 0 !important;
    padding: 4px 0 4px 28px !important;
}
li.charts-container-horizontal {
    padding: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: @grayLighter !important;
    .charts-link-button {
        .proxima-nova() !important;
        font-size: 1.1em !important;
        color: @grayDark !important;
    }
    .charts-control {
        .proxima-nova();
    }
}

Answer 1

您可以在ui.cssClass选项中使用ControlWrapper，但是您需要调用JQuery并将其嵌入：

$(".columnFilter_class .charts-menu-button-caption").css({"color":"red"});

这样做对我有用。

自定义Google Chart列过滤器

1 个答案: