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

T

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

Code: 
#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;
}
 
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:

HTML: 
<style>
    .redactor_box .redactor_BbCodeWysiwygEditor
    {
        height: 120px!important;   
    }
</style>

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.
 
Chris D said:
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.
Click to expand...

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:

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 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 :)
 

Similar threads

T
  • Question Question
XF 1.3 Change the height threshold for the appearance of redactor_box scroll bar
Replies
0
Views
676
tonnyz
T
Back
Top Bottom