This is my code for a TextArea that auto resize (I'm using Errai so TextArea is injected btw):
@Inject
@DataField
TextArea content;
@AfterInitialization
public void afterInit(){
content.getElement().setAttribute("wrap","off");
content.addKeyUpHandler(new KeyUpHandler() {
@Override
public void onKeyUp(KeyUpEvent event) {
$(content)
.css("overflow-y", "hidden")
.css("overflow-x", "auto")
.css(CSS.HEIGHT, "300px")
.css(CSS.HEIGHT, DOM.getElementPropertyInt(content.getElement(),"scrollHeight") + "px");
}
});
content.addValueChangeHandler(new ValueChangeHandler<String>() {
@Override
public void onValueChange(ValueChangeEvent<String> event) {
$(content)
.css("overflow-y", "hidden")
.css("overflow-x", "auto")
.css(CSS.HEIGHT, "300px")
.css(CSS.HEIGHT, DOM.getElementPropertyInt(content.getElement(),"scrollHeight") + "px");
}
});
content.addMouseUpHandler(new MouseUpHandler() {
@Override
public void onMouseUp(MouseUpEvent event) {
$(content)
.css("overflow-y", "hidden")
.css("overflow-x", "auto")
.css(CSS.HEIGHT, "300px")
.css(CSS.HEIGHT, DOM.getElementPropertyInt(content.getElement(),"scrollHeight") + "px");
}
});
}
This code works fine with few problems I want to take note:
- The code does not look elegant, code is redundant, is there a way to simplify it
- Typing makes the TextArea auto-grow, also CTRL + V command also makes it grow with the content, however RIGHT-CLICK + Paste item in context menu does not auto grow you have to click again the TextArea the second time to trigger it to grow.
- When the TextArea grows it's quite steep, is it possible to have a smooth effect?