How to limit the size of horizontal bar in Kibana Canvas data table

Elastic Stack Kibana
#1

Hi, I have a data table that is very wide and the header column titles are long. Is there a way I can limit the size of scroll bar and also wrap the words in each of the column header so that they fit into the fixed-sized scroll bar?

I tried the following but it doesn't seem to work. Also, I tried to find documentation on all available css class for kibana canvas to no avail. Any information will be appreciated.

.canvasRenderEl .canvasDataTable__th {  width: 50px;text-decoration: underline; weight:bold; color: black; word-wrap: break-word}
#2

Hi @tangkalo,

I've tried your code with a couple tweaks. Not sure if that's what you wanted but adding this worked for me:

.canvasRenderEl .canvasDataTable__th {  
  max-width: 50px;
  text-decoration: underline; 
  font-weight:bold; 
  color: black; 
  word-wrap: break-word;
  white-space: initial;
}
  
.canvasRenderEl .canvasDataTable__td {  
  max-width: 50px;
  word-wrap: break-word;
  white-space: initial;
}

Screenshot 2021-03-30 at 11.33.54
Screenshot 2021-03-30 at 11.33.541068×688 47.7 KB

I am not sure though if that's what you meant. Let me know if I can help with anything else.

#3

Thank you, Marta. That works. I did change break-word to normal so that words are actually wrapped to next line.