Decrease the height of Richtext in a multifield of component's dialog. | Community
Skip to main content
A
adi411
Level 2
May 15, 2024
Solved

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

  • May 15, 2024
  • 3 replies
  • 1877 views

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

 

 

 

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 


This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by adi411

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

3 replies

tushaar_srivastava
tushaar_srivastava
Level 6
May 15, 2024

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

 

 

 

    A
    adi411Author
    Level 2
    May 15, 2024

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

      tushaar_srivastava
      tushaar_srivastava
      Level 6
      May 15, 2024

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

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        May 16, 2024

        @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
        A
        adi411AuthorAccepted solution
        Level 2
        May 16, 2024

        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
          Community Advisor
          Anudeep_GarnepudiCommunity Advisor
          Community Advisor
          May 16, 2024

          @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

          }

          AG
            avesh_narang
            avesh_narang
            Level 3
            May 19, 2024

            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.

            Terms & ConditionsAccessibility statement

            Loading footer...