Настроить фильтр столбцов диаграммы Google

Я пытался выяснить, как настроить фильтр столбцов со своим собственным стилем, но по какой-то причине Google решил поместить отображаемый HTML в нижней части тега body, в другими словами: меню из фильтра столбцов прикреплено к DOM вне самого элемента управления в нижней части тега body. Почему же они решили поместить его туда? Это меня немного расстроило, потому что это заставляет меня ставить много !important; после каждого нового правила CSS, которое я хочу.Настроить фильтр столбцов диаграммы 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/МЕНЬШЕ:

.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 ?? поэтому я могу это исправить. –

@ManjunathSiddappa Я сделал, это в вопросе! – maverick

Вы можете использовать ui.cssClass в ControlWrapper вариантов, но вам нужно вызвать JQuery и вставьте его вот так:

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

Выполнение этого сработало для меня.

источник

2015-03-06 22:52:52

Настроить фильтр столбцов диаграммы Google

ответ

Смежные вопросы