1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by tonnyz, Jan 4, 2015.

  1. tonnyz

    tonnyz Member

    This thread's question is relevant with my "actually-not-a-bug :p" report to @Chris D here:

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

    <iframe style="width: 100%; height: 104px;" frameborder="0" class="redactor_textCtrl redactor_MessageEditor redactor_BbCodeWysiwygEditor redactor_">
        <base href="http://localhost/community/">
        <link rel="stylesheet" href="http://localhost/community/css.php?style=23&amp;css=editor_contents&amp;d=1420373561">
      <body contenteditable="true" dir="LTR" style="overflow-y: hidden; min-height: 99px;">
    It's quite interesting that when I edited the "overflow-y:hidden" into "overflow-y:scroll" directly on the browser's source like this:
    <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:
      .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 :)
  2. cclaerhout

    cclaerhout Well-Known Member

    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:
            ed.$editor.css('min-height', '');

    Replace with:

            ed.$editor.css('min-height', '');
             var maxHeightCss = ed.$el.css('maxHeight');
               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 likes this.
  3. tonnyz

    tonnyz Member

    thx @cclaerhout I will this soon (y)

Share This Page