# Working ui\_template button with flexible text styling

**URL:** <https://discourse.nodered.org/t/working-ui-template-button-with-flexible-text-styling/34249>\
**Category:** Dashboard\
**Created:** [14 October 2020 14:43 UTC](https://discourse.nodered.org/t/working-ui-template-button-with-flexible-text-styling/34249 "2020-10-14T14:43:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [14 October 2020 14:43 UTC](https://discourse.nodered.org/t/working-ui-template-button-with-flexible-text-styling/34249/1 "2020-10-14T14:43:25Z")

</div>

I have this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/48ff2c1571b921067acf54b8dce90e81738395a8.png)  
fiddle [http://jsfiddle.net/c2e8rykt/2/](http://jsfiddle.net/c2e8rykt/2/)  
Which has CSS

```auto
body {
padding: 10px;
background-color: #003;
}

.remote-button.onoff {
  height: 100%;
  opacity: 1;
  color: white;
}

.remote-button {
  border-radius: 10px;
  height: 100%;
  overflow: hidden;
}

.remote-button:hover {
  border-radius: 10px;
  border: 1px solid red;
}

.remote-button span {
  border-radius: 10px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

```

and HTML

```auto
<div style="height: 200px; width: 100px;" class="remote-button">
  <span style="color: white; background-color: #009900;" class="onoff">Node red line that may overflow the 1234 width of the button<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off</span>
</div>

```

How can I put this code into a ui\_template for button and ui\_template for manipulation ?

Any simple example will do. md is not required as long as the template plays nice with the dashboard.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 October 2020 21:37 UTC](https://discourse.nodered.org/t/working-ui-template-button-with-flexible-text-styling/34249/2 "2020-10-14T21:37:03Z")

</div>

Isn't this a continuation of [Ui\_template mvc and scope of context/flow/global stores](https://discourse.nodered.org/t/ui-template-mvc-and-scope-of-context-flow-global-stores/33635/126)? If not how is it different?

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [15 October 2020 06:07 UTC](https://discourse.nodered.org/t/working-ui-template-button-with-flexible-text-styling/34249/3 "2020-10-15T06:07:36Z")

</div>

Hi, Yes and no. The reason for a new post is because I failed to get any information relating to the bigger picture and the title topic.

It also appears here that one stands a better chance of moving forward if a smaller more concise example is examined so that is why.

I am now just looking for ui\_template button examples and am finding them a bit thin on the ground.

I just get a blank screen if I try with the code above. Any idea why ?

By the way what do you think about the css button styling ?

---

<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:** [14 November 2020 06:07 UTC](https://discourse.nodered.org/t/working-ui-template-button-with-flexible-text-styling/34249/4 "2020-11-14T06:07:38Z")

</div>

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