Horizontal scrolling text gets clipped

Community General Discussion
1

Hi !

I'm making a tool that displays text statically under a certain number of character, an that makes it scroll from right to left if too long (basically larger than the widget width)

I can get the general mechanic working but the text gets clipped on its right side if it's larger than the widget width. It seems than only the rendered part get translated and anything that is not rendered if no translation is applied is no displayed after translation.

Any idea on how to fix that ?

Please find a working exemple below.

Type your text in the input. The css code is in "css_move_1"

horizontal_scroll.json (13.4 KB)

Bonus question : is it possible to call onValue inside onCreate (to avoid code repetition)

Thanks,

Nicolas

2

Add this to the label's css

overflow-x: auto;
pointer-events: auto;

Could be worth adding a "scroll" option to the text widget to that effect.

3

Bonus question : is it possible to call onValue inside onCreate (to avoid code repetition)

You could do the reverse:

  1. Create a local function in the On.Create
  2. Call the local function in the On.Value

Example:

// On.Create
locals.doSomethingFunction = () => {
 // do stuff here
}

// call function in On.Create
locals.doSomethingFunction()

// On.Value
locals.doSomethingFunction()
4

@jean-emmanuel when adding those two lines in the css, I'm getting a scrollbar inside of the translated part of the text

capture

Do you have the same behaviour ?

@DMDComposer thanks for the insight !

1 Like
5

Sorry I didn't read your question correctly, this instead seems to work (might need some tweaking with the translation boundaries though)

overflow: visible;
width: auto
6

Thanks a lot ! It works now.

Indeed, the boundaries calculation is a bit tricky.

For those interested, I made a CSS version and a Canevas version to compare the performances and ease of use.

The css version is a little bit smoother and sharper but I had to use a monospaced font to approximate the width calculation and set the width of the widget to a fixed amount of pixel.

The canevas version is a tiny bit blurry and a little less smooth but is truly 100% responsive, having access to the width of the canevas and being able to calculate the exact width of the text.

scroll.json (17.0 KB)

1 Like