Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Adding rich text formatting to a title component

Avatar

Avatar
Boost 1
Level 1
SiriusRex
Level 1

Like

1 like

Total Posts

16 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Give Back
Validate 1
Affirm 1
View profile

Avatar
Boost 1
Level 1
SiriusRex
Level 1

Like

1 like

Total Posts

16 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Give Back
Validate 1
Affirm 1
View profile
SiriusRex
Level 1

16-09-2020

A designer on our team is asking us to modify our Title component to allow the use of bold formatting on part or all of the title. Bolding the whole thing would be easy enough, but it's the partial bolding of text that I can't figure out.

 

I've tried switching the field to richtext and then eliminating all plugins except the bold formatting. But the problem there is that now I have a huge text entry box and I can't figure out how to make it one line. 

 

I'm wondering if there's a different approach - all of the OOTB Title components don't allow rich text formatting, and none of them seem to have single line entry fields that allow rich text, either. 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 1
Level 1
SiriusRex
Level 1

Like

1 like

Total Posts

16 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Give Back
Validate 1
Affirm 1
View profile

Avatar
Boost 1
Level 1
SiriusRex
Level 1

Like

1 like

Total Posts

16 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Give Back
Validate 1
Affirm 1
View profile
SiriusRex
Level 1

17-09-2020

Ultimately, all I needed to do was create a data-attribute on the richtext node that I could target with authoring-specific CSS. The answers below all point to that, but I think maybe went in a direction that was too complex for what I was trying to do.

Answers (3)

Answers (3)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

16-09-2020

You can add granite:class property to text field node, which will be adding class to DOM and control height using css. Just make sure if you are using RTE you should be removing default p tag otherwise semantics could be the problem.

Avatar

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

232 likes

Total Posts

294 posts

Correct Reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

232 likes

Total Posts

294 posts

Correct Reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile
Shashi_Mulugu
MVP

16-09-2020

@SiriusRex I understand your problem statement and converting to rich text is the only way I see, but I didn't understand your concern of having RTE editor as big box in authoring dialog?

 

Can you please explain more about that? As RTE is a free form text editor with OOTB unlimited content capabilities it is big in size?

 

Do you want to make it appear small or restrict content entry to limited lines?

 

To limit box size , no OOTB way but try playing with coral.rte css and override with our custom css by creating a custom clientlib

 

For Charatcer limit restrictions we can implement validators which is again custom implementation.

Avatar

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

564 likes

Total Posts

707 posts

Correct Reply

234 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

564 likes

Total Posts

707 posts

Correct Reply

234 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

16-09-2020

Hi @SiriusRex,

Rich text editor has a predefined height set in OOB CSS via height and padding properties.

Now per your use case to reduce it to one line height or for a look alike of text field, you can write CSS overwriting the same. 

To target specifically without affecting all richtext resource in general, within dialog content markup we have an hidden field capturing sling:resourceType which will have the value as component path of respective dialog. (screenshot #1)

Using this as an identifier, am suppressing the related properties as shown below

Sample snippet for reference (You can add in project specific clientlibs folder or clientlibs with category - cq.authoring.dialog as this is needed only in author)

Below is per AEM 6.5.0

 

$(document).on("dialog-ready", function() {
    	var rescType = $(".coral3-Dialog-content input[name='./sling:resourceType']").val();
    	console.log("Resource Type="+rescType)
        if(rescType.includes("learnings/components/content")){ // applies to all component dialogs under this path - learnings/components/content
            $(".cq-Dialog:not([fullscreen]) .cq-RichText-editable").css("height", "unset");
			$(".cq-RichText-editable").css({"min-height":"unset", "padding":"unset"});
            $(".cq-Dialog[fullscreen] .cq-RichText .rte-sourceEditor").css("height", "unset"); // for full screen
        }

    });

 

Screenshot 1:

Vijayalakshmi_S_0-1600280826222.png

Outcome in richtext field:

Vijayalakshmi_S_1-1600280877235.png