Expression Widget Style Text Width Limit and Multiline

Expression Widget Style Text Width Limit and Multiline

  
I have an Expression widget to display a field of observations that can be 1000 characters long, but I am not able to limit the number of characters in a row and also put several lines to display text formated.

For example, instead of display text like this:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

I would like to have text display like this if the character row limit would be 10:

aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aa

Someone help me?
Hi Miguel,


Did you tried something like splitting the string in blocks of 10 characters:  targetString = targetString + substring( originalString, index, index+10) + newline()

You could do it on a application (eSpace) action or in an extension action.


Please let me know if you need additional information/help.

regards,
João Portela
  
Hi João,

First of all, thank you for your help, but I wonder if there is no other way, with parameters or the style sheet to put the text of an expression
widget on multiple lines with fixed length, below follows my particular case:


As you can see the expression widget puts the text of the Observations field (which can be 1000 characters) in one unique line and I would like to get in many lines, like an input widget can do..

Do you know any way to do that?

It is possible with normal style and if you use spaces!!!!

problem with your testcase is, that it's just 1 word, and browsers are not able to wrap those properly. and will break styling.
ofcourse there are workaround for that, but still.

1. use normal text... there are no long words like those.
2. if it still exists, add spaces/linebreaks to those words.

Hi Miguel,

You can also create a container around that element and change the container CSS to use width:100px; word-wrap: break-word; 

Cheers,
Tiago Simões
Hello everyone,

Thanks for the help, in fact the case that I mentioned was not a good example because
there aren't words with the size of this one :) trying with nomal words I don't have any problem.

Thanks again.

Miguel Pereira
Hi Tiago,

What is the code for the css to adjust the max width of a container called Container123? I am just now starting to learn css and currently I opened the style of the container, went to style sheet editor and opened the 'home' Web Screen Style Sheet tab on the left.  I have in there...

#Container123
{
   width:100px; word-wrap: break-word;
}

and it does not do anything. I'm sure I did something wrong here haha.

Thanks,
Mark
Hi Miguel,

It's a very bad practice to reference objects by their name. You need to define a style like:

.WrapContainer {
   width:100px; word-wrap: break-word;
}


And then in Service Studio select the container you wish to apply it and set the Style property.

Regards,
João Rosado
Thanks for that info.

I put the code

.WrapContainer {
   width:100px; word-wrap: break-word;
}

into the main ccs just below all the others (ie: .Text_Justified, .Text_Preformatted). I then selected WrapContainer for my container style.

My expression inside the container is simply displaying a 1,000 length text statement from my table. But it still covers the whole page instead of going down to 100px.

Am I missing something?
Mark
Not really sure, Mark.

Could you send us the eSpace for us to take a look?

A good tool for you to have at hand when working with CSSs is Firefox and its addon, Firebug. That allows you to troubleshoot and change almost everything that relates to styles - in runtime!

Regards,

Paulo Tavares
Thanks Paulo for solving this!!

My espace needed one additional piece of code ("white-space:normal;"), so it looks like this:

.WrapContainer {
   width:100px; word-wrap: break-word; white-space
: normal;
}


If You Need Help Resizing The Width of Something in CSS....

Just in case any newbie's were wondering (like I was), I went to Style in my espace, scrolled down to the bottom to (Style Sheet Editor...). There, I found where the rest of the css coding was for the other styles (like Text_Preformatted, ect.), this was under the heading "*-----------eSpace Specific Styles Start---------------*" I inserted it under ".Text_Justified { text-align:justify;}. Then, went I hit close, I made sure my container was selected, scrolled down the styles list and then "WrapContainer" appeared. I select WrapContainer, got some help here :), and now it works.

.WrapContainer {
   width:100px; word-wrap: break-word; white-space
: normal;
}


-Mark
Thanks for sharing the solution Mark.

I'm sure this will be helpful for others who bump into the same problem!

Keep up the great work, and let us know how it goes.

Regards,

Paulo Tavares