About the new html property

Community Usage questions
1

Thanks for adding this feature, really cool, allows very easy customisation of widgets :slight_smile:

a couple of comments :

I first tried to use it to display label and value of my widgets with this kind of code :

 @{this.id} <br> @{this.value}

br seems to insert 2 lines break
image
I’d love to keep this text as compact as possible… how can I do it ?

adding a line break in the code itself (as I use to do in the value prop of a text widget)
image doesn’t work

For most of the widgets, html is added above the widget itself, but for some (switch and button) it is added on top of the widget (in the frame)

image
image560×559 30.7 KB

is it the expected behavior ?

in some cases, I would love to be able to add some infos on top of the widget, like this :
image
is it possible with the html property ?

A couple of nice looking examples would be very welcome :slight_smile:

thanks

1 Like
2

There's only one line break here, you need to change the css line-height

.html {
  line-height: 10rem; 
}

For most of the widgets, html is added above the widget itself, but for some (switch and button) it is added on top of the widget (in the frame)

Yes, not all widgets are laid out the same way, it's up to you to play with css here.

in some cases, I would love to be able to add some infos on top of the widget, like this :

css is your friend here :slight_smile:


.html {
 position: absolute;
 line-height: 10rem;
 top: 10rem;
 left: 0;
 right: 0;
 text-align: center;
 pointer-events: none; /* needed to let events pass through */
}

A few tips are already available here but we're dealing with generic html/css here, internet is full of very good examples on the subject.

1 Like
3

WOW, thanks for the ultra-fast reply !!
solves all me needs, great :grinning: :+1:

4

is there a way to custom the label name of a fader - knob ?

edit :
get it (thanks to @ abstrus)
<h3 style="color:red;text.align:center;" title="tooltip"> GAIN </h3>