# UI-Theme - Row height

**URL:** <https://discourse.nodered.org/t/ui-theme-row-height/94913>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 January 2025 07:13 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913 "2025-01-26T07:13:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 January 2025 07:13 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/1 "2025-01-26T07:13:49Z")

</div>

This must have been asked before, but cant find from my search skills.

How to make the row height much more compact than default minimum (32) in UI-THEME settings ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/4049fd6b76b69d4ba8d11660231e136d2fc15542.png)

I want to display a ui-table, with more compact style (more no of rows in visible desktop).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bb68e9c274925864477e31518d962bc549b94400.png)

---

<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:** [26 January 2025 07:37 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/2 "2025-01-26T07:37:02Z")

</div>

2 things to adjust  
Font size and the row height. Find good balance between those.

```auto
.nrdb-ui-table .v-table--density-default{
    --v-table-row-height: 20px;
}

.nrdb-ui-table .v-table__wrapper{
    font-size: smaller;
}

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 January 2025 12:26 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/3 "2025-01-26T12:26:57Z")

</div>

I must be doing something wrong, the row height in the ui-table is not changing ~~neither the font size~~

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d75750097f2b5b821231293d46a32308469182f2.png)

I tried widget group scope / page scope nothing is working.

EDIT: Font size is changing, row height is not..

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 January 2025 12:50 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/4 "2025-01-26T12:50:43Z")

</div>

UPDATE:

there must be some other CSS override happening in the existing page/group.  
I created a new page/group and the row height change is working!

EDIT:

adding a button , disturbs it.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/878b5fb50b131b0756fffdcc60e197edcca137a4.png)butto

---

<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:** [26 January 2025 13:03 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/5 "2025-01-26T13:03:56Z")

</div>

```auto
.nrdb-ui-table .v-table__wrapper .v-btn.v-btn--density-default{
    min-height: unset !important;
}

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 January 2025 13:05 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/6 "2025-01-26T13:05:39Z")

</div>

UI Scope or Page Scope or CSS all pages?

---

<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:** [26 January 2025 13:08 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/7 "2025-01-26T13:08:22Z")

</div>

It's up to you. I can't advise without knowing all about your dashboard structure and of course the design target.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 January 2025 13:11 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/8 "2025-01-26T13:11:07Z")

</div>

OK. I understood the concept.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f81da389e59ffd804bd2bb1d74792ddac77b5e60.png)

---

<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:** [9 February 2025 13:11 UTC](https://discourse.nodered.org/t/ui-theme-row-height/94913/9 "2025-02-09T13:11:48Z")

</div>

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