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

[adi411]

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 field

Pic.1 - Drop Down field

Pic2 Selecting 'Call to Action' options from Drop Down field

Pic 3- Call to Action multifield being enabled

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 

[tushaar_srivastava]

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

[adi411]

Let me give it a try, and I will update.

[tushaar_srivastava]

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

[adi411]

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

[tushaar_srivastava]

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

[adi411]

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.

[kautuk_sahni]

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

[adi411 · Accepted solution]

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

        }

        }

[Anudeep_Garnepudi]

@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

}

[avesh_narang]

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.