# \[ANNOUNCE\] node-red-contrib-ui\_list

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335>\
**Category:** Share Your Nodes\
**Created:** [27 October 2018 10:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335 "2018-10-27T10:33:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [27 October 2018 10:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335/1 "2018-10-27T10:33:40Z")

</div>

Hi,

I have published initial version of [`node-red-contrib-ui_list`](https://www.npmjs.com/package/node-red-contrib-ui_list).  
A Node-RED UI widget node to display list of items on Node-RED dashboard.

![Example of ui_list](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e84836f8daaedb26962b9b7c1cda03d1b9f2b937.jpeg)

This node uses new Dashboard API introduced in version 2.10.0  
([announcement](https://discourse.nodered.org/t/announce-dashboard-version-2-10-0/4196/16)). So, use it with latest version of Node-RED dashboard.

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [2 November 2018 18:02 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335/2 "2018-11-02T18:02:06Z")

</div>

I put some test data to this new node and I can see 2 issues:

- parent `md-card` has style `height: 48px;` that's not even sufficient for one row of the list adding tiny vertical scrollbar - how to make the tile to display whole list?
- in dark theme ui\_list still uses black text color which makes it almost invisible

Current view:  
 ![obraz](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c5a667848ff4ed8949ef4846891b09060a9ed61b.png)

Expected view:  
 ![obraz](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1be1fd2b3edbfd28d4f4b21120e493f91a4fc27f.png)

Color is overridden by this css:

```auto
md-list.md-default-theme md-list-item.md-2-line .md-list-item-text h3, md-list md-list-item.md-2-line .md-list-item-text h3,md-list.md-default-theme md-list-item.md-2-line .md-list-item-text h4, md-list md-list-item.md-2-line .md-list-item-text h4,md-list.md-default-theme md-list-item.md-3-line .md-list-item-text h3, md-list md-list-item.md-3-line .md-list-item-text h3,md-list.md-default-theme md-list-item.md-3-line .md-list-item-text h4, md-list md-list-item.md-3-line .md-list-item-text h4 {
	color:rgba(0,0,0,0.87);
}
md-list.md-default-theme md-list-item.md-2-line .md-list-item-text p, md-list md-list-item.md-2-line .md-list-item-text p,md-list.md-default-theme md-list-item.md-3-line .md-list-item-text p, md-list md-list-item.md-3-line .md-list-item-text p {
	color:rgba(0,0,0,0.54)
}

```

Height of `md-card` is inline so I assume JS from Dashboard is doing its magic incorrectly.

And this is all on Firefox. Out of the curiosity I've checked that on Chrome only to see absolutely no list. After digging in inspector I've notice that `md-card` wrapper has `height: 0` and `opacity: 0`.

Any clues?

---

<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:** [2 November 2018 19:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335/3 "2018-11-02T19:46:40Z")

</div>

As per your other thread I think you still haven't flushed your cache through fully as the text should be light in the dark theme - and thus are missing other CSS updates as well.

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [2 November 2018 20:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335/4 "2018-11-02T20:18:44Z")

</div>

I've tested in other browser (Chrome) which I don't use at all, so for sure it didn't have any cache at all.

---

<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:** [2 November 2018 23:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335/5 "2018-11-02T23:45:37Z")

</div>

So how do you have the settings for template theme in Site ?

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [3 November 2018 09:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335/6 "2018-11-03T09:18:04Z")

</div>

- height of `ui_list` widget is not automatically decided. please specify required height in settings panel.
- in my environment, list example is shown in dark mode as follows:

![dark-mode](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ecf62c46d4239b06cabc2966ea1c73b2dacffdcd.png)

and following color specification is used:

```auto
.nr-dashboard-template p, .nr-dashboard-template h1, .nr-dashboard-template h2, .nr-dashboard-template h3, .nr-dashboard-template h4 {
    color: #eeeeee !important;
    background: #333333 !important;
}

```

If cache flushing of browser as suggested by @dceejay do not work,  
you may use HTML tag in input message to specify colors explicitly.

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [4 November 2018 01:10 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-list/4335/7 "2018-11-04T01:10:05Z")

</div>

> So how do you have the settings for template theme in Site ?

Have some screenshots - I've included: **Test group** : button, switches, template; **List test group** : ui\_list, gauge

Node-RED theme, dark:

 ![nr-theme-nr-dark](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3ed3b445b309b4c60442a3a3b0689d7e3325b101.png)

Node-RED theme, light:

 ![nr-theme-nr-light](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/211f2e895c6554bb24fd271ce61430ba6e529251.png)

New Angular theme, looks dark (and exactly as Node-RED theme) even if set to light:

 ![nr-theme-angular-light](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/79289ef21e7cb31db22220717585eef4f476dcb2.png)  
 ![nr-theme-angular-light2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9d4881429faa3d9904a8a7a301ff4ee44860be65.png)

Also, notice mentioned scrollbars. It's fresh Node-RED installation (done few days ago on a fresh card and Raspbian Stretch image), so generally out of the box.