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

Community Beginner ,
Jan 15, 2021 Jan 15, 2021

Copy link to clipboard

Copied

I need a scrollable text field for my banner.

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

Screenshot 2021-01-16 at 03.11.44.png

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:

Screenshot 2021-01-16 at 03.16.05.png

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.

Views

114

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Community Beginner , Jan 23, 2021 Jan 23, 2021
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 g...

Likes

Translate

Translate
Community Beginner ,
Jan 15, 2021 Jan 15, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 15, 2021 Jan 15, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 15, 2021 Jan 15, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines