Button name line break

Dashboard
1

If have a button that's made with the help of a ui_template in the dashboard.
That works perfect.

<md-button class="vibrate filled touched smallfont rounded" style={{msg.payload}}  ng-click="send({payload: 'Click'})"> 
 {{msg.buttonname}}
</md-button>

If I send a message to the button msg.buttonname= "Hello world" , works also perfect.
But now I want Hello and world on 2 lines in the button an that is something I can't get working.
Tried msg.buttonname= "Hello\nworld" , msg.buttonname= "Hello"+<br/>+"world" and some varieties on this but without luck.
What I'm doing wrong, how do i get the line break correct in the message?

2

Material Design does not allow for multi-line buttons by default..

3

If I do like this in the ui_template, the text is in 2 lines. This suggest that it's supported, but how to get it in a message?

<md-button class="vibrate filled touched smallfont rounded" style={{msg.payload}}  ng-click="send({payload: 'Click'})"> 
   Hello<br/>world
</md-button>
4

You need to bind the incoming msg by adding ng-bind-html="msg.payload" to your button

5

Cool, that was the trick.
Thanks

6

(Sorry this is an old thread....)

@dceejay

You need to bind the incoming msg by adding ng-bind-html="msg.payload" to your button

I have that problem and can't get what you mean by that.

7

In your button template you have to add ng-bind-html="msg.payload"
In this example below I have used msg.buttonname instead of msg.payload
Example:

<md-button class="vibrate filled touched smallfont rounded" style={{msg.backcolor}} ng-bind-html="msg.buttonname"  ng-click="send({action: 'Click'})"> 
 {{msg.buttonname}}
 
</md-button>

Now the payload of msg.buttonname can contains html.

msg.buttonname = "Licht<br/>Badkamer"

Capture

1 Like
8

Oh, so it isn't a button node. But the template node.

Right!

Silly me!

9

I did not understand what and where to write. Can you provide an example code?