text areas loaded from a db including linefeeds

[Terry Gilliver]

I have a database field which loads into a text area. This requires line breaks. I know that if you enter "
&#10"; in to the html of a textarea it will function correctly.

I tried the same method by putting "
" directly into the database field. However when loaded into the textarea viewing the source revealed that the string had been converted to "
", which failed to parse correctly and just inserted the text "
" when viewed in the text area.

How can I get around this?

Also is it possible to force the textarea to increase in height to match the content from the database field as some of the content can get hidden?

By the way, it was quite difficult to put those strings into this text area for similar reasons.

[Kateryna Grynko]

Hi Terry,

Why don't you use usual newline characters and carriage return? (\r\n)

[Terry Gilliver]

I have tried \r\n and they are just displayed as \r\n rather than being iinterpreted as carriage return/linefeed.

[Yurii Orishchuk]

Hi Terry,

You need to use "\n" to set line break in textarea component.

But it's important to correctly set this value in the DB. Unfortunatly you can not do it from DB admin interface. You can set it via REST API.

For example here is a code that's you can invoke from browser console:

pre

//Note: you need replace "restsupdateService" with update service datasource name.
restsupdateService.execute({data: {"_id": "53ba2599e4b09f5c7d50390f", name: "1234\n5678" } })

/pre

Regards.

[Terry Gilliver]

Ok I've go that sorted I decided to edit the data in the text area and then do an update, this works.

My other question is, can I force the textarea to increase in size the match the content of the database, so as not to hide some of the content making it necessary for the end user to have to stretch the text area manually to view all of the text?

[Yurii Orishchuk]

Hi Terry.

You can use some jQuery plugins for this goal.

Here is example how to use this one http://unwrongest.com/projects/elastic/

1 Create new Javascript and fill it with code from http://unwrongest.com/projects/elastic/ (you need download and copy text of main plugin js file)

http://prntscr.com/3wizoy/direct

2 Put textarea on the page you need. http://prntscr.com/3wj07g/direct

3 Add "page show" event handler and fill it with following code: http://prntscr.com/3wj0v3/direct

pre

//Note: you should replace "mobiletextarea_32" with your textarea name.
Apperyio("mobiletextarea_32").elastic();

/pre

Regards.

[Terry Gilliver]

Worked great on my android device, which is what I wanted. Just to let you know though, when viewed in the testing browser on my pc, although it stretched slightly, it didn't open up enough to view entire text.

That's not my problem though, Thanks again.

... a bit further testing shows that increasing the size of the browser display will allow the text areas to show correctly. i will need to test on a smaller device, to see if it ok, as I am currently testing on a tablet.

[Terry Gilliver]

I have tried using the jquery elastic extension on my existing news page. Here it doesn't work.

The textarea in this is within a collapsible set and reads multiple news items from a db. Is there an easy way to add the elastic extension to all the occurrences of this textarea? I am guessing that I need to find out the correct jquery selector for this.

[Yurii Orishchuk]

Hi Terry,

If you trying to apply elastic plugin to textarea within some iterate container you need to init elastic textarea every time you have add new textarea component to the page.

Simple way to do it is to add "success" event handler for service datasource that's populates your list with textarea inside and populate it with following code:

pre

jQuery("textarea").elastic();

/pre

Regards.