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

Question

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 · Accepted Answer

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

and changed the to

;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).

alexpestov · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded