Skip to Content

Hi again,

Yesterday was the end of the sprint and we successfully pushed many fixes and improvements to the site directory.

This is something I came across trying to solve a weird issue in a text area control we added somewhere in the portal and I thought it might be fun to share.

Sometimes you want to have a text area that can be re-sized by the user for whatever reason.

When you create a new textArea control, it comes with a fixed size that you can set in advance or by css etc.

However, you can very easily make it to be a dynamically re-sizable control if you get to know the following css class:

sapUiTxtA

Here is an example taken straight from the TextArea control’s page on the SAPUI5 Demo Kit website.

I took the TextArea example and modified it in the same page.

When you initially create it, it will come with this class: ‘sapUiTxtA’ and look like this:

/wp-content/uploads/2014/02/without_399014.png

So what you can do, is just use removeStyleClass(‘sapUiTxtA’) to get this:

/wp-content/uploads/2014/02/with_399015.png

I don’t know why, but sometimes you may have to explicitly add the class in order to actually be able to remove it…

(in this example I did it manually in the console)

I put a better example on snipix for you to play with and copy.

For some reason there is no API for this cute little feature and it does not show up anywhere in the documentation (at least not that I found…).

It’s a cool thing to know and may come in useful to some.

Keep in mind though, that playing around with the styles in such a way, or changing the way a control behaves not thru the API, may prove forward incompatible, so do it at your own risk, or at least keep good references of the places you have made such manipulations.

Have fun.

Byg

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply