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

**URL:** <https://discuss.elastic.co/t/how-to-limit-the-size-of-horizontal-bar-in-kibana-canvas-data-table/268710>\
**Category:** Kibana\
**Created:** [March 29, 2021, 10:47pm UTC](https://discuss.elastic.co/t/how-to-limit-the-size-of-horizontal-bar-in-kibana-canvas-data-table/268710 "2021-03-29T22:47:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tangkalo](https://avatars.discourse-cdn.com/v4/letter/t/cdc98d/32.png) [@tangkalo](https://discuss.elastic.co/u/tangkalo)\
**Post date:** [March 29, 2021, 10:47pm UTC](https://discuss.elastic.co/t/how-to-limit-the-size-of-horizontal-bar-in-kibana-canvas-data-table/268710/1 "2021-03-29T22:47:33Z")

</div>

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}
```

---

<div class="post-metadata">

**Author:** ![Marta\_Bondyra](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marta_bondyra/32/102122_2.png) [@Marta\_Bondyra](https://discuss.elastic.co/u/Marta_Bondyra)\
**Post date:** [March 30, 2021, 9:34am UTC](https://discuss.elastic.co/t/how-to-limit-the-size-of-horizontal-bar-in-kibana-canvas-data-table/268710/2 "2021-03-30T09:34:23Z")

</div>

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:

```auto
.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](https://us1.discourse-cdn.com/elastic/original/3X/5/f/5f2b21f36e7d25462b0a40d2a2e786b4f05b3ff8.png)

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

---

<div class="post-metadata">

**Author:** ![tangkalo](https://avatars.discourse-cdn.com/v4/letter/t/cdc98d/32.png) [@tangkalo](https://discuss.elastic.co/u/tangkalo)\
**Post date:** [March 30, 2021, 2:24pm UTC](https://discuss.elastic.co/t/how-to-limit-the-size-of-horizontal-bar-in-kibana-canvas-data-table/268710/3 "2021-03-30T14:24:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 27, 2021, 2:25pm UTC](https://discuss.elastic.co/t/how-to-limit-the-size-of-horizontal-bar-in-kibana-canvas-data-table/268710/4 "2021-04-27T14:25:27Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.