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

Not a Bug Appearance of redactor_box scroll bar does not adapt to the change of the redactor_box max-height

Discussion in 'Resolved Bug Reports' started by tonnyz, Dec 24, 2014.

  1. tonnyz

    tonnyz Member

    Sorry if this is not a bug, but I guess it is.

    The vertical scroll bar in the redactor_box will typically appear when the redactor_box reaches its max-height.

    I changed the max-height of the redactor_box, but the appearance of the scroll bar failed to adapt.

    Let's say, when the max-height has not been set, the redactor box can stretch upto 19 lines and the scroll bar will appear only after user reaches the 20th line

    After I set the max-height to 200px, the redactor box does only stretch upto 10 lines, BUT the scroll bar still will not appear until reaching the 20th line.

    So, changing the max-height here only affects the redactor_box maximum stretch. It does nothing to the height threshold for the appearance of the scroll bar.

    PS: this is my code for setting the max-height

    #storylist .blendedEditor .redactor_box.activated .redactor_btn_group ul,
    #storylist .blendedEditor .redactor_box.activated iframe,
    #storylist .blendedEditor .redactor_box.activated .redactor_smilies li,
    #storylist .redactor_textCtrl, #storylist .redactor_MessageEditor,
    #storylist .redactor_BbCodeWysiwygEditor, #storylist .redactor_ {   
    max-height: 100px;
  2. Chris D

    Chris D XenForo Developer Staff Member

    At the moment I believe this isn't a bug. There's a load of code that would likely override styling set in this way. The default behaviour of the editor is that it is "elastic" so its height will dynamically change dependent on its contents up to a certain point where it will then overflow with a scroll bar. There isn't a direct way to override the elastic behaviour IIRC. You can force it to have a fixed height, which may be some way to what you want to do, with this:

        .redactor_box .redactor_BbCodeWysiwygEditor
            height: 120px!important;   
    The fact that it is in style tags in HTML is deliberate. This would be mostly the only way to override the dynamic height set by the JS. If I find a better way, I'll let you know, but for now it seems as though that will achieve what you want.
  3. tonnyz

    tonnyz Member

    Sorry, but it brought no different effect with previous effort @Chris D :(

    BTW, I just found out this piece of code inside my browser's source:

    <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 scroll bar appear when the redactor box reached its custom max-height, just like what I wanted.

    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 :)
  4. Chris D

    Chris D XenForo Developer Staff Member

    If you need additional help you would be best to post in the Development Discussions forum.
    tonnyz likes this.
  5. tonnyz

    tonnyz Member

    Oops sorry for this.

    Isn't it more of a styling & customization, I'm posting there, ok ?

Share This Page