ExpandingTextArea component

Vaadin 6 / 7 / 8 Framework UI
21

Hi Dmitry,

Thanks for reporting this. I created a ticket about this (https://github.com/henrikerola/ExpandingTextArea/issues/6). And I am planning to release a version that contains the fix in a couple of days.

-Henri

22

Henri, is there a way to toggle the expanding effect and reset to initial rows set?

By default, I want it to expand, but when the user scrolls the UI, I want it to go a fixed row (part of my responsive UI)

23

Guys,

am I doing something wrong with the add-on, because I cannot make it work? Here’s what’s being done with Eclipse project:

  1. Create new Vaadin 7 project (I am using version 7.5.4)
  2. Copy the latest (v. 1.0.1) JAR to WEB-INF/lib and add the JAR to the project build path
  3. Add ExpandingTextarea component to the layout, something like:

final ExpandingTextArea expandingTextArea = new ExpandingTextArea();
expandingTextArea.setImmediate(true);
expandingTextArea.setWidth(“300px”);
content.addComponent(expandingTextArea);

  1. Compile widgetset and then compile theme
  2. Run the application

When I am running the application, the textbox appears as standard TextArea which has got style “v-textarea” associated with it. I then tried to tweak the tag style to “v-expandingtextarea” with FireBug and it seems to become responsive (i.e. the style changes to “v-expandingtextarea-focus” and the server side component starts to respond).

Anyhow, it seems that the new component does not get the right styles at the beginning and fails to work. Is there something else you’ve done to make it work as I can see some responses here indicating that?

24

Alright, after some trial and error I noticed that I did not include the compiled widgetset in my main UI. So, for others wrestling with this component, here’s what I did to get it working.

Add the widgetset declaration statement to the servlet configuration, i.e.

@VaadinServletConfiguration(productionMode = false, ui = MainUI.class, widgetset = "com.example.MyWidgetset")

where “com.example.MyWidgetset” is pointing to the “MyWidgetset.gwt.xml” file in your project package.

25

Idea is good, but it doesn’t work very well… new lines when not needed and not when text reach end of line, no settings for default number of rows (I don’t need two rows when I have text on one row), font size problems…

26

Hi,

Sorry about the late answer but thank you for the feedback! Could you elaborate a bit more you issues with the component. Which browser(s) do you use? Do you have some css on the project that could affect to the component?

Thanks,

-Henri

27

I just released version 1.1.0 of ExpandingTextArea component. List of included fixes can be found from
here
.

28

Hi Henri,
nice addon. I need to expanding the textarea on focus and shrink on blur. Do you have any plans of implementing such a feature?

And As well i noticed that your project is not a maven project? Plans to convert it to a maven project?
If not i will have to do this!

Thx anyway

29

I’m not very good with java script etc, so I prefer easier solution in Vaadin.

You could try to make a component with text field and text area and add a focus and blur listeners. Then just set visibility, cursor position and text in them according to your needs. You could also use this expansing text area instead of normal one if it works ok for you. Pretty easy if you don’t mind server communication as it’s pure Vaadin solution and not client side.

30

Hi Milan,

thx for your quick response.
Yes this seems to be the “server”-side way and i think it fits my needs.

Well now i understand what you mean! Hm. No this solutions is to dirty. I need a way so the fireRowsChangeEvent() is only triggered when the textarea gets focused.

Following does not work

textArea.addBlurListener(new BlurListener() {
@Override
public void blur(BlurEvent event) {
textArea.setRows(2);
}
});

due to the fireRowsChangeEvent in the setRows method

@Override
public void setRows(int rows) {
if (rows < 2) {
throw new IllegalArgumentException("rows must be >= 2");
}

if (this.rows != rows) {
this.rows = rows;
super.setRows(rows);
fireRowsChangeEvent();
}
}

Am i right?

To inform you, i get following exception in FF:

Maybe you can fix it in the next release…

31

I don’t think it’s dirty, you just create your own component based on some others… You would obviously have to implement your own events if you need them, because adding listener to inner component of some other component isn’t good idea…

according to the exception, did you recompiled widgetset?

32

I just released a new version of the addon that fixes this problem. The new 1.2.0 version also adds support for setting maximum rows.


https://github.com/henrikerola/ExpandingTextArea/issues?q=milestone%3A1.2.0

33

Hi, i tried to use this plugin like this and i does not work at all.
I`m doing anthing wrong? It works al normal TA vaadin component. I m using vaadin 7.5.10 and your later 1.2.0 version of plugin.

final ExpandingTextArea tafield = new ExpandingTextArea(“tafield”);
tafield .setImmediate(true);
tafield .setRows(2);
tafield .setMaxRows(5);

34

This means that the addon is not included to the widgetset of your application and it fallbacks to a normal TextArea on the client side. You need to compile a widgetset for you project that contains ExpandingTextArea.

Thanks,

-Henri

35

Henri,

i got it to work! The problem was that widgetset file was not compiled right after recompile. So i did update widgetset, but it did not placed file in correct folder so i did moved it on right spot and recopiled again and it worked!

Thanks!

36

Hi Henri,

Your component is great. But when initialized it is two rows high. Is there a way to make it one row high (like a TextField) at the be beginning and make it bigger only when needed?

Thanks

37

Hey Henri,
I know its been a year since last comment here. Hopefully you see this.

Would you be able to push out a new release, incorporating the changes I see have been committed a year ago, for initial default row size?
I have had to back out use of the component due to a QA test failure, due to the inability to set the initial row size and have it work.
(and I really want the other benefits of your component!).

Thanks!

38

Hello,

thanks for the component, it works as intended and the fork on github for V8 also works with vaadin 8.

I wonder if someone has an idea, on to acomplish this:

  • We have a gridlayout with 2 or more ExpandingTextAreas in the same line
  • Expand/shrink in horizontal works fine
  • When the content of the different ExpandingTextAreas in the same grid row have different number of lines, then I would like to have all ExpandingTextAreas in that row to have the same height, the height of the heighest ExpandingTextArea

I tried with different listener and setting setRows(…) with the largest value, but to no avail.

Any ideas?

40103.png

39

André Schild:
Hello,

thanks for the component, it works as intended and the fork on github for V8 also works with vaadin 8.

I wonder if someone has an idea, on to acomplish this:

  • We have a gridlayout with 2 or more ExpandingTextAreas in the same line
  • Expand/shrink in horizontal works fine
  • When the content of the different ExpandingTextAreas in the same grid row have different number of lines, then I would like to have all ExpandingTextAreas in that row to have the same height, the height of the heighest ExpandingTextArea

I tried with different listener and setting setRows(…) with the largest value, but to no avail.

Any ideas?

Hello,
Could you please explain how did you use the fork with Vaadin 8?

Thanks

40

Shruthi Kulai:

André Schild:
Hello,

thanks for the component, it works as intended and the fork on github for V8 also works with vaadin 8.

I wonder if someone has an idea, on to acomplish this:

  • We have a gridlayout with 2 or more ExpandingTextAreas in the same line
  • Expand/shrink in horizontal works fine
  • When the content of the different ExpandingTextAreas in the same grid row have different number of lines, then I would like to have all ExpandingTextAreas in that row to have the same height, the height of the heighest ExpandingTextArea

I tried with different listener and setting setRows(…) with the largest value, but to no avail.

Any ideas?

Hello,
Could you please explain how did you use the fork with Vaadin 8?

Thanks

Just make a copy on your disk and build the project, you can then use it directly when it’s in your local maven repository