XF 1.3 setting "overflow-y:scroll" for quick editor's redactor box

tonnyz · Jan 4, 2015

This thread's question is relevant with my "actually-not-a-bug

" report to @Chris D here:
https://xenforo.com/community/threa...he-redactor_box-max-height.89431/#post-876434

I just found out this piece of code inside my browser's source on a page with quick reply's redactor box:

Code:

<iframe style="width: 100%; height: 104px;" frameborder="0" class="redactor_textCtrl redactor_MessageEditor redactor_BbCodeWysiwygEditor redactor_">
  #document
  <html>
  <head>
    <base href="http://localhost/community/">
    <link rel="stylesheet" href="http://localhost/community/css.php?style=23&amp;css=editor_contents&amp;d=1420373561">
  </head>
  <body contenteditable="true" dir="LTR" style="overflow-y: hidden; min-height: 99px;">
    <ol>
      <li>
        <br>
        <br>
      </li>
    </ol>
  </body>
  </html>
</iframe>

It's quite interesting that when I edited the "overflow-y:hidden" into "overflow-y:scroll" directly on the browser's source like this:

Code:

<bodycontenteditable="true"dir="LTR"style="overflow-y: scroll;min-height:99px;">

It did bring the redactor box's scroll bar appear when the redactor box reached its previously customized max-height.

FYI, I previously set the redactor max-height to a custom height like this in extra.css:

Code:

  .redactor_box .redactor_BbCodeWysiwygEditor
    {
        height: 120px!important;
    }

Problem is I can't find those piece of code inside my template. It seems like {xen:raw $qrEditor}.inside quick_reply template generates them all.

Just a simple question, could you please tell me how to change that "overflow-y:hidden" above ? css way is preferrable

thanks

cclaerhout · Jan 4, 2015

I don't understand the question of this thread, but your previous one yes. XenForo is using an elastic JavaScript plugin to resize the RTE editor ; the max height can't be manually set. It could with the elastic mode of the basic textarea (also called "Bb Code editor"). You would have to customize the JS: {yourForum}/js/xenforo/full/bb_code_edit.js. Note this file is the full unminified version of the JS. The minified version is in the parent folder. It would have to be modified too. There are some online tools for this.

One possible way to modify this file is to:
Search for:

Code:

        ed.$editor.css('min-height', '');

Replace with:

Code:

        ed.$editor.css('min-height', '');

         var maxHeightCss = ed.$el.css('maxHeight');
         if(maxHeightCss){
           this.maxHeight = maxHeight = parseInt(maxHeightCss);
         }

Then you can use css to target the textarea (the one with the .BbCodeWysiwygEditor class) and give it a max-height value. It should work providing the max-height is bigger than the height ; so be specific when you target this css to let the auto-height for other editors.

But don't forget the automatic way XenForo is using can adapt to the size of user's screen. When you set a manual max-height, it's an arbitrary decision that might not be the best on all devices (if your purpose is to set a small max-height it should not be a problem).

tonnyz · Jan 7, 2015

cclaerhout said:
I don't understand the question of this thread, but your previous one yes. XenForo is using an elastic JavaScript plugin to resize the RTE editor ; the max height can't be manually set. It could with the elastic mode of the basic textarea (also called "Bb Code editor"). You would have to customize the JS: {yourForum}/js/xenforo/full/bb_code_edit.js. Note this file is the full unminified version of the JS. The minified version is in the parent folder. It would have to be modified too. There are some online tools for this.

One possible way to modify this file is to:
Search for:

Code:

ed.$editor.css('min-height', '');

Replace with:

Code:

ed.$editor.css('min-height', ''); var maxHeightCss = ed.$el.css('maxHeight'); if(maxHeightCss){ this.maxHeight = maxHeight = parseInt(maxHeightCss); }

Then you can use css to target the textarea (the one with the .BbCodeWysiwygEditor class) and give it a max-height value. It should work providing the max-height is bigger than the height ; so be specific when you target this css to let the auto-height for other editors.

But don't forget the automatic way XenForo is using can adapt to the size of user's screen. When you set a manual max-height, it's an arbitrary decision that might not be the best on all devices (if your purpose is to set a small max-height it should not be a problem).

thx @cclaerhout I will this soon

XF 1.3 setting "overflow-y:scroll" for quick editor's redactor box

tonnyz

Member

cclaerhout

Well-known member

tonnyz

Member

Similar threads

We value your privacy