[jmnaud]

Hello,

I want to create a text field that automatically expands multi-line when I use Javascript to enter text in it using JQuery ().html.

Right now when I do that the text appers on a single line and I lose most of the text to the right of the device (I’ve set the width to a fix value with no automatic resize). In addition I would want the widgets below that text field to maintain their relative position to it (always the same distance from the textfield independent of the size of the textfield).

How can I have a textfields that resizes itself based on the size of the text I enter into it and that keeps a relative position with the widgets below it?

Thx.

Jean-Marc

[support-octavio]

@jmnaud,

I’m not sure if I understood exactly what you want. do You want to increase the height of your text widget when is clicked ont it to enter text? would be this a text field widget that converts to a text area widget? or would be it a text area since the begin but with a smaller height?

[jmnaud]

Octavio,

This is a text widget (not text area because it does not need to be editable).

However, the text for the widget will come from a server at runtime so when I create the text widget in MobiOne I do not know how small or large to make it.

As I receive the text from the server I use JavaScript to set the value of the text in the widget using: $(‘#page-text1’).html(‘new text’);

However ‘new text’ can be very short or very long. I would like the text widget to adapt to the text length (and push down or pull up all widgets below).

Currently what I’ve tried is creating a simple one line text widget in MobiOne. But when I set it in runtime via JavaScript with a long text string it simply flows out to the right of the screen on a single line. How can I have it automatically grow to multiple lines with wrapping?

Thx.

[jmnaud]

Ok; I;ve now found how to create a multi-line text widget! It just needs to be at least two lines when I create it in MobiOne (if it is just one line then it does not do multi-line but if I make it two lines at the beginning by using Shift-Enter, then everything works properly when I enter a large text).

I just need to know how to keep the widgets below the text widget to move down/up as the text widget grows or shrink. How can that be done?

Thx.

[support-octavio]

Hi jmnaud,

This example should be helpful for you: Replace long wrapping text example

[jmnaud]

Thx Octavio; that works great.

And I also found out how to resize the widget so that all other widgets move accordingly. I call the following code when setting the text (where $text and $panel are the results of JQuery searches via $())

adjustTextHeight = function($text, $panel, text) {
$text.css({‘height’: ‘1px’});
$text.empty();
var sandbox = $(‘<span/>’).text(text).appendTo($text);
var current_height = $text[0].scrollHeight;
$text.empty().text(text);
$text.css({‘height’: current_height + ‘px’});
var panel_height = current_height + 10; // sets the panel with an extra 10 pixels with respect to the text
if ($panel) { $panel.css({ ‘height’: panel_height + ‘px’}); }
};

Jean-Marc

[Author]

Posts