Repository navigation
Autoscroll textbox #974
Description
Mark Reed asked 2017-07-31 21:11:46 UTC
The textbox is missing the ScrollToCaret or ScrollToEnd function and I wanted to see if I could call it from javascript.
<span class="kwd">var</span><span class="pln"> textarea </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'textarea_id'</span><span class="pun">);</span><span class="pln">
textarea</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">=</span><span class="pln"> textarea</span><span class="pun">.</span><span class="pln">scrollHeight</span><span class="pun">;
textBox.Call("scrollTop", 10000)?
</span>
<span class="pun">textBox.Call("this.scrollTop = this.scrollHeight")?
Any ideas?</span>
Activity
itg-assistant commentedon Jun 12, 2026
Luca answered 2017-07-31 21:37:01 UTC
scrollTop and scrollLeft are low level properties of the <textarea> DOM element while Wisej widgets are javascript widgets. You'd have to retrieve the DOM element to manipulate it directly. Also, most Wisej widgets are composite widgets. In the case of the TextBox, it's actually a container because it supports tool buttons on the left and the right of the inner text field.
Wisej (qooxdoo) provides an intermediate object, called the content element, that abstracts browser specific features. So in this case, you can call scrollToX and scrollToY:
this.textBox1.Eval("this.getChildControl('textfield').getContentElement().scrollToY(10)");
this.textBox1.Eval("this.getChildControl('textfield').getContentElement().scrollToX(10)");
The line above retrieves the inner textfield, then it gets the content element implementation, and calls either scrollToY() or scrollToX(). http://www.qooxdoo.org/current/api/#qx.html.Element~scrollToY!method_public
I will also log an enhancement to add ScrollToX and ScrollToY methods to the TextArea control. The result is the same, just simpler syntax.
Best,
Luca
itg-assistant commentedon Jun 12, 2026
Mark Reed answered 2017-07-31 22:45:58 UTC
Could it be added to the Panel or FlowLayout panel as well?
Our application adds new UserControls to a Flowlayout panel and then we are doing this after we add a new control.
var totalWidth = Blades.Sum(n => n.Width); /Total width of all added controls
BladeHost.Call("scrollToX", totalWidth); /Scroll to the far right (BladeHost is a flowlayout panel)
itg-assistant commentedon Jun 12, 2026
Mark Reed answered 2017-08-01 19:10:03 UTC
I was actually able to fix this without calling javascript
This code seems to do what I need.
var lastCtrl = BladeHost.Controls.Cast().LastOrDefault();
if (lastCtrl == null)
{
return;
}
this.ActiveControl = lastCtrl;
BladeHost.ScrollControlIntoView(lastCtrl);
BladeHost.HorizontalScroll.Value = this.BladeHost.Width;
itg-assistant commentedon Jun 12, 2026
Mark Reed answered 2017-08-01 19:10:27 UTC
var lastCtrl = BladeHost.Controls.Cast().LastOrDefault();
if (lastCtrl == null)
{
return;
}
this.ActiveControl = lastCtrl;
BladeHost.ScrollControlIntoView(lastCtrl);
BladeHost.HorizontalScroll.Value = this.BladeHost.Width;
itg-assistant commentedon Jun 12, 2026
Frank (ITG) answered 2017-08-13 22:39:12 UTC
Hi Mark,
ScrollToX and ScrollToY have been added to the TextBox in Wisej 1,3.82
Best regards
Frank