Creating a scrollable text with Label component — can't format it

[alexpestov]

I need a scrollable text field for my banner.

The easiest way I found to do that is using label component:

Then I added a custom style to the html file for .ui-label (overflow:auto) and for the ::-webkit-scrollbar, and here's the result:

BUT... I can't apply any style to this text, and the client suddenly decided to decorate the hell out of it: bold, italic, bullets, margins, etc. I tried to put parts of the text in <span>, but all tags just appear as plain text in this text field. Does anyone know any good tricks for this case? Is there any way to format this piece of text in Label component? Maybe replace it afterwards (in .html or .js) somehow with formatted version?

Please don't force me to remake the whole thing in Google Web Designer, where a scrollable text can be done in 1 minute.

[alexpestov]

I mean, I can format the whole text, of course, but I need to apply different styles to different parts of it — some bold, some italic, etc.

[kglad]

why are you using a label component instead of a dynamic textfield?

[alexpestov]

Because dynamic textfield doesn't have a scroll option.

It's not even a text when you render it — it translates to vector shapes, doesn't it?

[alexpestov · Accepted solution]

Here's how I solved it:

1. Published file with the label, carefully placed as I needed it;

2. Opened Web Inspector in the browser and copied label's html code;

3. Removed the label from source file and re-published it;

4. Added the label html code from step 2 to html file into the <div id="dom_overlay_container"> and changed the <label>  to <div>;

5. Now you can stylize all the text inside that div as you want!

To make it even better, I ended up changing all pre-generated tranformation parameters I got on step 2 to more simple and readable left, top, width and height that I put into css for this div. Also, I added the native CSS animation to it (couldn't use fade in for Label before).