# UIBUILDER - text boxes

**URL:** https://discourse.nodered.org/t/uibuilder-text-boxes/97405
**Category:** Dashboard
**Tags:** uibuilder
**Created:** [3 June 2025 20:12 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405 "2025-06-03T20:12:29Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [3 June 2025 20:12 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405/1 "2025-06-03T20:12:30Z")

</div>

What would be the best approach to create text boxes similar to Dashboard 2's text boxes?

![textboxes](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ecd6b5eb74740bd3d7b0c085b1ed360204d0fe20.png)

I've looked at using the 'Text Box' template in the uib-element node but it creates it within it's own card, and appears better suited to adding paragraphs of text instead of small amounts of data.

 ![textbox2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/53bfe65a01f1bd03b52dbc863df6bbcc3025fe9b.png)

I can't see what options are available within the [uib-tag node](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/nodes/uib-tag), I see that it has a button, but is there a list somewhere of what other tags exist?

* * *

Otherwise, I'm slowly learning... 😆

 ![flow2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/1455965400f0a0543069760f7defe78eefcffa44.png)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [3 June 2025 20:57 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405/2 "2025-06-03T20:57:33Z")

</div>

> [@Paul-Reed](#):
>
> I can't see what options are available within the [uib-tag node](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/nodes/uib-tag), I see that it has a button, but is there a list somewhere of what other tags exist?

The tag node literally creates an HTML tag - ANY tag. 🙂

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

What you are seeing in D2 is actually some monstrous HTML:

```html
<div data-v-c88f8420="" id="nrdb-ui-group-be18b9332e179722" class="nrdb-ui-group">
    <div data-v-c88f8420=""
        class="v-card v-theme--nrdb v-card--density-default v-card--variant-outlined bg-group-background"
        style="min-height: 48px;"><!---->
        <div class="v-card__loader">
            <div class="v-progress-linear v-theme--nrdb v-locale--is-ltr" role="progressbar" aria-hidden="true"
                aria-valuemin="0" aria-valuemax="100" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;">
                <!---->
                <div class="v-progress-linear__background"></div>
                <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                <div class="v-progress-linear__indeterminate">
                    <div class="v-progress-linear__indeterminate long"></div>
                    <div class="v-progress-linear__indeterminate short"></div>
                </div><!---->
            </div>
        </div><!---->
        <div class="v-card-text">
            <div data-v-c9902742="" data-v-c88f8420="" class="nrdb-layout-group--grid"
                style="grid-template-columns: repeat(min(6, var(--layout-columns)), 1fr); grid-template-rows: repeat(1, minmax(var(--widget-row-height), auto));">
                <!---->
                <div data-v-c9902742="" id="nrdb-ui-widget-9d3f7a404f41e792" draggable="false"
                    class="nrdb-ui-widget nrdb-ui-text"
                    style="display: grid; grid-template-columns: minmax(0px, 1fr); grid-template-rows: repeat(0, minmax(var(--widget-row-height), auto)); grid-column-end: span min(6, var(--layout-columns));">
                    <div data-v-0db0e89c="" data-v-c9902742="" class="nrdb-ui-text nrdb-ui-text--col-center"><label
                            data-v-0db0e89c="" class="nrdb-ui-text-label">Today</label><span data-v-0db0e89c=""
                            class="nrdb-ui-text-value">3.96kW</span></div><!---->
                </div><img data-v-c9902742=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""
                    style="position: absolute;">
            </div>
        </div><!----><!----><!----><span class="v-card__underlay"></span>
    </div>
</div>

```

Nearly all of which isn't needed just to display a text box! (yes, that is purely a single text box in a group). And now you can start to see why D2 can be slow on mobile or limited devices like Pi's.

The text box [uib-element](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/nodes/uib-element) output is the simplest to use if you are going to use the no-code options. Just note that you can send HMTL as the text, not just plain text. So to get the vertical layout, you could send `Solar<br>103W` for example.

On the other hand, if you are prepared to get your hands "dirty" with some HTML, you will find that most of the HTML on your pages is actually static, doesn't need to be dynamic. Then all you need is something like this in the body of your HMTL:

```html
<main>
  <section>
    <article id="solarinfo">
      Solar: <br> <span id="solarpwr"></span>
    </article>
  </section>
</main>

```

Using `main` applies a sensible width and structure (from uibuilder's default CSS). `section` isn't really needed but can be helpful to group things together. `<article>` is semantic HTML for a box if information. It is formatted that way by uibuilder's default CSS but of course, you can style it anyway you like.

With that, you can now simply use the [`uib-update`](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/nodes/uib-update) node targeted at `#solarpwr` (which is the CSS selector), and you just update that specific element on the page.

This is FAR from the only way to approach this! There are even easier ways if you are happy to use HTML. For example, in the html above, simply replace the `span` with:

```html
<span uib-topic="solarpwr"></span>W

```

And now you can simply send a msg to the uibuilder node:

```json
{
  "topic": "solarpwr",
  "payload": 103
}

```

And you have a web page that is updated with [simple messages](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/using/easy-ui-updates).

Add in a `uib-cache` node before the uibuilder node, by default, it manages cache entries by msg.topic so everything "just works"™ 😉

> [@Paul-Reed](#):
>
> what other tags exist

For the [`uib-tag`](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/nodes/uib-tag) node? There are quite a few - this may help. 😎

> **[HTML elements reference - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)**
>
> This page lists all the HTML elements, which are created using tags.

Yup, you can use it to dynamically add any HTML element you like.

Let me know which approach you want to take - no-code from Node-RED or starting to use HTML front-end code. So I don't keep steering you off in a different direction!

PS: Also don't forget that you can start with no-code but later capture the generated HTML and turn it into more static front-end code for maximum efficiency and maximum control - should you want to. 😃

PPS: ~~The latest documentation has guides on building a more complete, rich page with HTML.~~ Scratch that! I've just realised that I forgot to actually add the content to the 2 documentation pages! Urgh! 🤣 Well, you will find the examples here in the forum anyway, check in the `uibuilder` tag, I shared a grid and a dashboard (flex) layout some while back.

---

<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: [4 June 2025 11:04 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405/3 "2025-06-04T11:04:39Z")

</div>

This post is inspiring me to _take another look_ at the uibuilder, which I had put on back burner while I am slowly transitioning from DB1 to DB2, as the basic DB2 dashboard is up and ready.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [5 June 2025 20:11 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405/4 "2025-06-05T20:11:52Z")

</div>

> [@TotallyInformation](#):
>
> This is FAR from the only way to approach this! There are even easier ways if you are happy to use HTML.

I'm getting somewhere using `uib-element` nodes, and modifying them with css from chained `uid-update` nodes, like this;

 ![z1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fea4377d85ecef40ef5e0f9164052e73296c0ee2.png)

```auto
[{"id":"ada7df8996acdd89","type":"uib-element","z":"1326aadbacf36704","g":"db18aa2d5896df30","name":"","topic":"","elementtype":"article","parent":"#more","parentSource":"","parentSourceType":"str","elementid":"tb1","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"1","positionSourceType":"str","passthrough":false,"confData":{},"x":930,"y":1420,"wires":[["dcbe3da3fe079096"]]},{"id":"8648b7f99b0fe6cc","type":"link out","z":"1326aadbacf36704","g":"db18aa2d5896df30","name":"link out 3","mode":"link","links":["869f73c536d38982"],"x":1335,"y":1420,"wires":[]},{"id":"94b51a071dd14fa1","type":"uib-element","z":"1326aadbacf36704","g":"db18aa2d5896df30","name":"","topic":"","elementtype":"article","parent":"#more","parentSource":"","parentSourceType":"str","elementid":"tb2","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"2","positionSourceType":"str","passthrough":false,"confData":{},"x":930,"y":1460,"wires":[["dcbe3da3fe079096"]]},{"id":"26eba994a103bc64","type":"uib-element","z":"1326aadbacf36704","g":"db18aa2d5896df30","name":"","topic":"","elementtype":"article","parent":"#more","parentSource":"","parentSourceType":"str","elementid":"tb3","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"3","positionSourceType":"str","passthrough":false,"confData":{},"x":930,"y":1500,"wires":[["dcbe3da3fe079096"]]},{"id":"49b1423c424047a4","type":"uib-element","z":"1326aadbacf36704","g":"db18aa2d5896df30","name":"","topic":"","elementtype":"article","parent":"#more","parentSource":"","parentSourceType":"str","elementid":"tb4","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"4","positionSourceType":"str","passthrough":false,"confData":{},"x":930,"y":1540,"wires":[["dcbe3da3fe079096"]]},{"id":"dcbe3da3fe079096","type":"uib-update","z":"1326aadbacf36704","g":"db18aa2d5896df30","name":"css","topic":"","mode":"update","modeSourceType":"update","cssSelector":"div[id^=\"tb\"].box","cssSelectorType":"str","slotSourceProp":"payload","slotSourcePropType":"msg","attribsSource":"{\"style\":\"border: 0px; padding: 1px; width: 120px;\"}","attribsSourceType":"json","slotPropMarkdown":false,"x":1130,"y":1420,"wires":[["f16fe283525b04ae"]]},{"id":"f16fe283525b04ae","type":"uib-update","z":"1326aadbacf36704","g":"db18aa2d5896df30","name":"css","topic":"","mode":"update","modeSourceType":"update","cssSelector":"article","cssSelectorType":"str","slotSourceProp":"","slotSourcePropType":"str","attribsSource":"{\"style\":\"margin: 0.1rem;\"}","attribsSourceType":"json","slotPropMarkdown":false,"x":1250,"y":1420,"wires":[["8648b7f99b0fe6cc"]]}]

```

...and so far I get;

 ![z3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91ab32e81bee62adde37c4c3e4f4fb7921b2137f.png)

~~Any suggestions to centre the text or improve it?~~ See following post!

~~Also.. in each `uib-element` node I've numbered their `position` with numbers 1 to 4 (tb1 = 1, tb2 = 2, tb3 = 3, etc), but it doesn't seem to make any difference, and they appear in the wrong order.~~ Fixed in following post

 ![z4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/c/fc73a5952a19efb0bcf3a306edb4aeead35e69ba.png)

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [6 June 2025 16:43 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405/5 "2025-06-06T16:43:11Z")

</div>

Tried Julian's suggestion instead - adding this to the body;

```auto
<main>
  <section>
    <article id="solarinfo">
      Solar: <br> <span id="solarpwr"></span>
    </article>
  </section>
</main>

```

...and works much better, giving me many more opportunities to tweak the css.

![responsive](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66a835e9d844163d35aa313191ca6aeab5f51afb.gif)

It's now responsive, ~~but I need to spend a bit more time closing the gap between the 'wrapped' rows.~~ - (EDIT - Now sorted)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [6 June 2025 17:38 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405/6 "2025-06-06T17:38:35Z")

</div>

Hi Paul, sorry, I was in London with work last night so not online.

Now you've started to use HTML directly, I think you will be pleased at how quickly things will go. Same with css of course.

At the end of your GIF, you caught a CSS display thanks to the dev tools and this should start to help you with layouts.

When using flex layouts, you may want to use a layout generator such as [https://loading.io/flexbox/](https://loading.io/flexbox/)

For a quick and dirty test, I added an id of `s1` to the section tag and then used this simple CSS added to index.css for the layout - it uses nested CSS so only works on newer browsers.

```css
#s1 {
    display:flex;
    flex-wrap: wrap;

    article {
        min-width: 5em;
        max-width: 5em;
        /* separate the articles be 1rem horizontally and vertically */
        margin: 1em;
        text-align: center;
    }
}

```

`margin` can be separated into 4 elements to control top, right, bottom, left in case you need different separation horizontally and vertically.

Note that I **ALWAYS** use relative lengths such as `em`, `rem` or `%` for everything, avoid fixed `px` like the plague. 🙂

---

<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: [6 July 2025 17:39 UTC](https://discourse.nodered.org/t/uibuilder-text-boxes/97405/7 "2025-07-06T17:39:31Z")

</div>

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