Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Decrease the height of Richtext in a multifield of component's dialog.

Avatar

Level 2

Hi All,

I have a requirement to decrease the height of the Richtext field which is present in the multifield of the component's dialog.

 

The issue I am facing is that :

When the first time I 'Add' / enable the multifield in the component's dialog, I am not able to achieve the decreased size of the Richtext. However, when I author few things in the multifield and save the dialog and re-open it, then I am able to achieve the decreased size.

 

I have used the below piece of Jquery to achieve the decrease height size.

$(document).on("dialog-layouttoggle-floating", ".cq-Dialog",function(e) {
 
   var $ctaUrlDynamicAttrDiv = $(e.target).find(".ctaUrlDynamicAttributesContainer").find(".cq-RichText-editable");
   $ctaUrlDynamicAttrDiv.css("height", "7.2rem");
 
});

Also, few inputs that might help 
1. Since it is a multifield in the dialogs, the fields would be saved as --
abc/xyz/item0/fieldname, 
abc/xyz/item1/fieldname

2. The multifield about which I am referring, appears or gets presented on the dialog, when the author selects an option from another dropdown field present in the dialog. Please find below screenshots in order

Dropdown fieldDropdown field

 

 

 

Pic.1 - Drop Down field

 

adi411_1-1715758674082.png
Pic2 Selecting 'Call to Action' options from Drop Down field
 
adi411_2-1715758751697.png

 

Pic 3- Call to Action multifield being enabled

 

 

adi411_3-1715758973721.png

Pic 4- Multifield being open, and the RTE field marked in green, is the field whose size I need to decrease when we are opening/accessing  this field for the first time

 

@kautuk_sahni 


1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi @kautuk_sahni  @tushaar_srivastava  - I tried a different approach
which was basically setting a timer and then adjusting the height, the idea was to load the richtextfield first and then execute the function to decrease the height

Below is the code I used to achieve the functionality

   var $ctaUrlDynamicAttrDiv = $(e.target).find(".ctaUrlDynamicAttributesContainer.cq-RichText-editable");
   $ctaUrlDynamicAttrDiv.css("height""7.2rem");
    setTimeout(adjustHeight,500);
    
    $(".coral3-Button:contains('Add')").on("click"function(e) {
    setTimeout(adjustHeight,500);
});
 
});

 function adjustHeight(){
         if($('.cq-Dialog').attr('fullscreen') != undefined){
 
       $(".ctaUrlDynamicAttributesContainer").find(".cq-RichText-editable").css("height""20rem");
        }
        else{
       $(".ctaUrlDynamicAttributesContainer").find(".cq-RichText-editable").css("height""7.2rem");
        }
        }

View solution in original post

10 Replies

Avatar

Level 7

Hi @adi411 ,
I cam across this for a custom dialog.

Can you try to update the jquery function when the dropdown changes or when multifield is added. instead only for "dialog-layouttoggle-floating"
You might need to add an event listener for this 3 action.
1- dialog ready [dialog-ready]
2- Dialog layout changes [dialog-layouttoggle-floating]
3- Dropdown option Changes

maybe something like

 

 

$(document).on("dialog-ready", ".cq-Dialog", function(e) {
    //adjust height here or make a common function if you're height will be same
});

$(document).on("dialog-layouttoggle-floating", ".cq-Dialog", function(e) {
    var $ctaUrlDynamicAttrDiv = $(e.target).find(".ctaUrlDynamicAttributesContainer").find(".cq-RichText-editable");
    $ctaUrlDynamicAttrDiv.css("height", "7.2rem");
});

$(document).on("change", ".cq-Dialog .coral3-Select", function(e) {
    //adjust height here or make a common function if you're height will be same
});

 

 

 

Avatar

Level 7

Hi @adi411 , please let us know if it worked, or you find any other solution

Avatar

Level 2

Hi this did not work for me, but this was helpful to know as it provided me insight to what I can do more.

Avatar

Level 7

Happy to know please share you finding over the community. this is a greate usecase.

Avatar

Level 2

Hi @tushaar_srivastava - shared my approach and the method I used in the below comments. Please do have a look. Thank you for your suggestion and help.

Avatar

Administrator

@adi411 Did you find the suggestions helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni

Avatar

Correct answer by
Level 2

Hi @kautuk_sahni  @tushaar_srivastava  - I tried a different approach
which was basically setting a timer and then adjusting the height, the idea was to load the richtextfield first and then execute the function to decrease the height

Below is the code I used to achieve the functionality

   var $ctaUrlDynamicAttrDiv = $(e.target).find(".ctaUrlDynamicAttributesContainer.cq-RichText-editable");
   $ctaUrlDynamicAttrDiv.css("height""7.2rem");
    setTimeout(adjustHeight,500);
    
    $(".coral3-Button:contains('Add')").on("click"function(e) {
    setTimeout(adjustHeight,500);
});
 
});

 function adjustHeight(){
         if($('.cq-Dialog').attr('fullscreen') != undefined){
 
       $(".ctaUrlDynamicAttributesContainer").find(".cq-RichText-editable").css("height""20rem");
        }
        else{
       $(".ctaUrlDynamicAttributesContainer").find(".cq-RichText-editable").css("height""7.2rem");
        }
        }

Avatar

Community Advisor

@adi411 

 

Easy way is to add property "wrapperClass" to your RTE field in dialog and value can be a custom class name like for example "multi-rte".

 

Write a css rule using this custom class (here "multi-rte") and load that client lib in extraClientlibs of the dialog.

 

CSS:

.multi-rte {

    height: 200px; // based on your requirement

}

Avatar

Level 3

I implemented it similar way , to add more in it , adding wrapper class is too using property class="multi-rte" in a RTE field in dialog.

 

Its benifit is its will be specific change to that particular component itself , instead of genric RTE change.