Dropdown Filter CSS

[gbarnett (Gary E. Barnett)]

Does anyone have an example of how to style the dropdown filter element?

[alisongoryachev]

Hi, @gbarnett ! Can you provide more information? I'm not sure what "dropdown filter element" you are referring to.

[gbarnett (Gary E. Barnett)]

In Kibana Canvas, there is the Dropdown Filter element that can be added to any canvas. I’m looking for how to style this element when used on a canvas by changing the CSS. I have done this for the Date/Time Filter element, but not for
the Dropdown Filter element.

[alisongoryachev]

Hi @gbarnett.

You should be able to achieve this the same way as the Time Filter. Within the "Element style" panel, there is an option to define CSS.

[gbarnett (Gary E. Barnett)]

I tried that and it had no impact (at the CSS level). If there any any examples of changing the style of the dropdown filter with the CSS panel, that would be very helpdul.

[alisongoryachev]

Hi @gbarnett.

Can you provide more details on what you are trying to accomplish with the CSS changes, and then I can take a closer look? Thanks!

[gbarnett (Gary E. Barnett)]

Thanks Alison. I’m attempting to change the font size, font family, font size, font color and background color of the drop down button itself. I’ve been able to do this with the date/time filter drop down, but have not been able
to do the same with the drop down filter element.

[alisongoryachev]

Are you targeting the the class name of the select element itself, .canvasDropdownFilter__select?

[gbarnett (Gary E. Barnett)]

Alison, here is the CSS that I have for the Date/Time Filter element on my canvas, and it is working great. Now, I’m trying to style the Dropdown Filter element the same, but the same CSS does not work for the Dropdown Filter. I do not
have an example of how to properly apply a CSS element to this filter to change the style of the main button. For the Date/Time Filter element, this is the configuration in the CSS box of the element’s properties…

.canvasRenderEl button{

font-family: sans-serif;

color: #000000;

font-size: 1.4em;

font-weight: bold;

background: #FBBD00;

border-radius: 12px;

padding: 10px;

}

.canvasRenderEl button:hover {

color: #ffffff;

background: #423300

}

[alisongoryachev]

Hi, @gbarnett. Can you try this?

.canvasDropdownFilter__select {
 font-family: sans-serif;
 color: #000000;
 font-size: 1.4em;
 font-weight: bold;
 background: #FBBD00;
 border-radius: 12px;
 padding: 10px;
}

.canvasDropdownFilter__select:hover {
  color: #ffffff;
  background: #423300;
}

Also, if you inspect both elements using the browser's dev tools, you'll notice they are two different element types. The Time Filter uses an HTML <button>, whereas the Dropdown Filter uses <select>, so they are not going to be exactly 1:1.

[gbarnett (Gary E. Barnett)]

Fantastic! That was exactly what I was looking for. For future reference, what is the best way to find these types of references to know how to style elements on a Kibana Canvas? For example, how were you able to find that specific information regarding the labels for the CSS?

[alisongoryachev]

Great! Glad that worked. I'm not aware of any specific references to this. You should be able to find the class name of the element you wish to target using the browser's dev tools. For this example, I included a screenshot of this in one of my previous comments.