自定義Google圖表列過濾器

我一直在試圖弄清楚如何自定義列過濾器與我自己的風格，但由於某種原因，谷歌已決定把呈現的HTML放在身體標籤的底部，在換句話說：來自列過濾器的菜單連接到body標籤底部的控件本身之外的DOM。他們爲什麼決定把它放在那裏？這讓我有些沮喪，因爲這迫使我在每一個新的CSS規則後都放了很多!important;。自定義Google圖表列過濾器

我也讀過關於它的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(); 
    } 
}

來源

2014-12-01 maverick

你可以請創建jsfiddle？所以我可以修復它。 – 2014-12-01 16:47:33

@ManjunathSiddappa我做了，這是在問題！ – maverick 2014-12-02 08:08:08

您可以使用在ControlWrapper選項ui.cssClass，但你需要調用jQuery和像這樣嵌入它：

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

這樣做對我有用。

來源

2015-03-06 22:52:52

自定義Google圖表列過濾器

回答

相關問題