darku darku - 2 months ago 27
CSS Question

vaadin-combo-box / vaadin-combo-box-overlay change background color / Polymer API

I'm trying to override the background color present in

vaadin-combo-box-overlay
element.

Here is the css that I want to override, more specifically the background property, source taken from (https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)

:host {
position: absolute;
@apply(--shadow-elevation-2dp);
background: #fff;
border-radius: 0 0 2px 2px;
top: 0;
left: 0;
.......
}


So I've tried something like:

:root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
background: red !important;
background-color: red !important;
}


Also I've tried with
:host
but I guess it should be used
:root
because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.

Also I'm wondering why the background is not parameterized as the text color is:

#selector .item {
cursor: pointer;
padding: 13px 16px;
color: var(--primary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


Specifying a different value for
--primary-text-color
I'm able to change the text color..

Thanks.

Answer

Thanks Patrick !!

I wasn't thinking about to do try it this way.

Here's what I did, a hacky solution though.

ready : function(){
                var combo = this.$$('#comboid');
                combo.addEventListener('vaadin-dropdown-opened'', function() {
                    var overlay = Polymer.dom(this.root).querySelector('#overlay');
                    overlay.style.backgroundColor = primaryBackground;
                });
            },

I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.

Comments