# Tab names get cut off when changing widget size

**URL:** <https://discourse.nodered.org/t/tab-names-get-cut-off-when-changing-widget-size/26083>\
**Category:** Dashboard\
**Created:** [4 May 2020 19:17 UTC](https://discourse.nodered.org/t/tab-names-get-cut-off-when-changing-widget-size/26083 "2020-05-04T19:17:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [4 May 2020 19:17 UTC](https://discourse.nodered.org/t/tab-names-get-cut-off-when-changing-widget-size/26083/1 "2020-05-04T19:17:33Z")

</div>

When changing the widget size from 48x48 to 24x24 in the dashboard, the tab text in the tab menu get cut off at the bottom.  
I tried al the other size settings in the dashboard but this will not solve this issue.

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33f1697996b5159a3d342d7f94c81e272bc28fbd.png)

Screen shot is made in Firefox. Chrome it's slightly better but also not good.

Do I miss something to get correct?

Dashboard 2.21.0, Node-red 1.0.3

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 May 2020 19:36 UTC](https://discourse.nodered.org/t/tab-names-get-cut-off-when-changing-widget-size/26083/2 "2020-05-04T19:36:42Z")

</div>

24x24 is dangerous choice. Many widgets will need some overrides, many of them just will fail to look good. If you find such issues too late, you'll need to do a lot of work again.  
But anyway - here's the first override you'll need to add

```auto
[{"id":"3b2c50c0.7e193","type":"ui_template","z":"3dd56201.af994e","group":"a526628d.55186","name":"custom-style","order":6,"width":0,"height":0,"format":"<style>\n .md-button {\n min-height: unset\n line-height: unset\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":510,"y":890,"wires":[[]]},{"id":"a526628d.55186","type":"ui_group","z":"","name":"Chart","tab":"8a5fcf4d.e533e","order":3,"disp":true,"width":"15","collapse":false},{"id":"8a5fcf4d.e533e","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [4 May 2020 19:57 UTC](https://discourse.nodered.org/t/tab-names-get-cut-off-when-changing-widget-size/26083/3 "2020-05-04T19:57:41Z")

</div>

Sorry, but the override doesn't work, nothing changes.

I noticed now that my problem is only with the _Node-red theme everywhere_. The _angular theme anywhere_ doesn't have it, menu looks fine.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 May 2020 21:53 UTC](https://discourse.nodered.org/t/tab-names-get-cut-off-when-changing-widget-size/26083/4 "2020-05-04T21:53:04Z")

</div>

yes - I think the limit is about 28 (from what I recall) - but yes it's not really meant to be so cramped - 24 is a bit too small.  
So yes feel free to use the Angular themes..

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 May 2020 21:53 UTC](https://discourse.nodered.org/t/tab-names-get-cut-off-when-changing-widget-size/26083/5 "2020-05-18T21:53:05Z")

</div>

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