Textarea styling

[tneil]

The HTML5 text area control should get some OS styling based on which OS it is running on

[alopix]

I agree. The <textarea> is really ugly right now and doesn't fit to the rest of the design.

[Bjern]

I changed mine slightly, improving it, by editing the 0.9.3.js file. Go to line 116 and add textarea on the end. Code should look something like this.

bb.textInput.apply(root.querySelectorAll('input[type=text], [type=password], [type=tel], [type=url], [type=email], [type=number], [type=date], [type=time], [type=datetime], [type=month], [type=datetime-local], [type=color], textarea'));

Haven't tested this on all platforms AND it seems to ignore the rows showing pretty much one line. Definitely a styling issue as well as being a problem in the js. Maybe someone can take it further.

[rrenna]

This would be appreciated, quite the eye-sore currently

[karancan]

Just basing this question off of what @Bjern spoke about: should textarea's be given the same styling as all the other input types like text? If so, textarea's would have the class bb-bb10-input (for bb10), etc.
Or should textarea's be their own entity separate from bb.textInput?

[tneil]

I believe v0.9.4 "next" has some styling to it. But the end goal is to make the control an auto growing control based on text input to match the UX of the devices.

This requirement isn't just for BB10, it is for all of the OS versions from 5->10

[karancan]

Alright so I have some code that allows the textarea to grow itself based on the amount of input but before pushing the code, I have a couple of questions:

1- Should the autogrow characteristic of the textarea be optional? Or does the user get to decide whether they want to use it or not?

The way I have it now is if you wanted the resizing, you would do this:

<textarea id="sample-text-area" rows="4" onkeyup="document.getElementById('sample-text-area').resize()"></textarea>

If you didn't want the resizing, you could just ignore the resize() function call.

2- I have added textarea's to the bb.textInput type so that it gets styling just like all the other textInput types. Is this ok? Or should I create bb.textArea ?

[tneil]

The UX with the text area on BlackBerry is that you want it to grow in height by default. If you need a control that doesn't size vertically, then you would just use an input.

So I think enabling the resize by default would be great!

[karancan]

Opened pull request #425 to try and address this issue

[xqliu]

Dear Karancan,

I have searched out bbui.js version 0.9.6.58 pulled from main stream today, and found this pull request has not been merged, also tried the sample app and the textarea is still not style according to standard UX and was not auto extened it's height based on length of the contents, do we have any plan on merge it? otherwise if we would like to use the textarea styling and height auto extend feature, a manual merge have to be done.

Thanks.

[tneil]

While the pull request seemed to work in Ripple it did not work on actual devices which is why it was closed until further investigation could be done

[karancan]

Yes, I reached a dead end with my investigation and then moved on to some other tasks. I'd be happy to work on it if anyone can provide pointers as to why it seemed to work in Ripple but not the device.

[xqliu]

Dear,

Are the styling not working or auto extend row number?

For the styling, since I totally used my own css definition and it works fine on both ripple and simulator, so I am not sure why your implementation is not working, I might not be able to help on this since I didn't look deep into the CSS auto applying mechanism on bbUI.

For the row number auto extend, it works on ripple and simulator, here are the solution I used

• Define the hook

<textarea id="name" onkeyup="Util.resizeTextarea(this)"  onmouseup="Util.resizeTextarea(this)">
</textarea>

• The utility.

        resizeTextarea : function (elem) {
            var contents = elem.value.split('\n'), newRows = 0, currentLine, currentRows = elem.rows;
            if (!elem.initialRows) {
                elem.initialRows = 1;
            }
            for (currentLine = 0; currentLine < contents.length; currentLine += 1) {
                if (contents[currentLine].length > elem.cols) {
                    newRows += Math.floor(contents[currentLine].length / elem.cols);
                    longLines += 1;
                }
            }
            newRows = newRows + contents.length;
            if (newRows !== currentRows) {
                elem.rows = (newRows < elem.initialRows ? elem.initialRows : newRows);
            }
        },

I don't have a dev alpha device so I am not sure whether it works on the device.

Regards.

[karancan]

It would be nice if we could test this on the device !

[bert2002]

I tried the code from litchi and the pull request from karancan and its not working in Ripple or on the Z10. If you need some one for testing, I am here :)

[miamon]

some update about this issue? Thanks

[miamon]

Just tested this solution http://labs.ft.com/2009/05/auto-growing-textareas/ and seems works fine

[tneil]

Currently I'm focusing on the 10.3 styling, and then I might tackle this text area. I did find a way on another project on how to create a good auto growing text area... I just need to finish up the 10.3 styling work first.

[tneil]

There's an interesting trick to get it to work which basically looks something like this:

<div>
  <div style="position:absolute;visibility:hidden"></div>
  <textarea style="height:100%;width:100%></textarea>
</div>

Then you make sure the fonts/margins/padding etc are all the same between the inner div and the text area. Everytime the text area is changed, you set the innerHTML of the div. That way the div grows with the text entered thus sizing the textarea that is set to 10% 👍 And since the div is hidden it is invisible behind the textarea that layers on top of it.

I have it working, just need to add it to bbUI

[jbhoot]

Any updates on this?