How can I make a table record display a cell in multi line?

How can I make a table record display a cell in multi line?

  

Hey, first of all I'm using OutSystems 11 in case that matters.


So... I have a table that has 4 entity attributes (Nome,Tipo,ObjectivoActividade and ObjectivoEstrategico), both ObjectivoActividade and ObjectivoEstrategico are text fields that will have to handle up to 500 characters, here's what I have atm: 


As you can see, the second row has alot of chars in "Objectivo Estratégico" is there any way I can make it so when the length of the text reaches the width of the cell it makes a new line under the first one and keeps on going there?

Hello,


Try to solve this via CSS. 

So for the column above, define a CSS class - lets say .MayBeLongColumn.

And try specifying the CSS:

.MayBeLongColumn {

  word-wrap: break-word;

}


Let me know if this solves the problem. You can first try finding the correct div on which this CSS should be applied by specifying the CSS from the chrome web console.

Fábio Rodrigues wrote:

Hey, first of all I'm using OutSystems 11 in case that matters.


So... I have a table that has 4 entity attributes (Nome,Tipo,ObjectivoActividade and ObjectivoEstrategico), both ObjectivoActividade and ObjectivoEstrategico are text fields that will have to handle up to 500 characters, here's what I have atm: 


As you can see, the second row has alot of chars in "Objectivo Estratégico" is there any way I can make it so when the length of the text reaches the width of the cell it makes a new line under the first one and keeps on going there?


Hi Fabio,

I think it does what you are expecting. here the problem is you don't have space between the text so only this behavior is coming.

You can try this piece of CSS code to break without space text.

SyntaxEditor Code Snippet

word-wrap: break-word;


Regards,

Pankaj Pant

Chetan Yewale wrote:

Hello,


Try to solve this via CSS. 

So for the column above, define a CSS class - lets say .MayBeLongColumn.

And try specifying the CSS:

.MayBeLongColumn {

  word-wrap: break-word;

}


Let me know if this solves the problem. You can first try finding the correct div on which this CSS should be applied by specifying the CSS from the chrome web console.


Hey Chetan,

I tried to add the class to the collumn, didn't work, after looking in the inspect element I managed to find that it would only work in the maincontent div, which i can't add classes on...


Edit:

Solution

Hi Fabio,


On the webscreen CSS editor you can define the following:

div.content-middle {

  word-wrap: break-word;

}

Solution

Pankaj pant wrote:

Fábio Rodrigues wrote:

Hey, first of all I'm using OutSystems 11 in case that matters.


So... I have a table that has 4 entity attributes (Nome,Tipo,ObjectivoActividade and ObjectivoEstrategico), both ObjectivoActividade and ObjectivoEstrategico are text fields that will have to handle up to 500 characters, here's what I have atm: 


As you can see, the second row has alot of chars in "Objectivo Estratégico" is there any way I can make it so when the length of the text reaches the width of the cell it makes a new line under the first one and keeps on going there?


Hi Fabio,

I think it does what you are expecting. here the problem is you don't have space between the text so only this behavior is coming.

You can try this piece of CSS code to break without space text.

SyntaxEditor Code Snippet

word-wrap: break-word;


Regards,

Pankaj Pant


Hey Pankaj, even if I used text with spaces it just writes it all on one giant line,

I tried that class but found out I can only make it work if it is in the MainContent Div, but I can't add classes there, also tried to put everything inside a container and assign it the class but didn't work aswell

Hello Fabio,


You have two ways to specify the CSS. I have checked your screen shot.


1. Using the Id of the container (by matching partially)

[id$="MainContent"] {
  word-wrap: break-word;
}


This one is more appropriate.


2. Option 2:


div.content-middle {

 word-wrap: break-word;

}


Please add either of this (option1 or option2 ) in the CSS of the webscreen.

That should solve the problem.

Chetan Yewale wrote:

Hi Fabio,


On the webscreen CSS editor you can define the following:

div.content-middle {

  word-wrap: break-word;

}


Not yet :/

Tried the 

[id$="MainContent"] {
  word-wrap: break-word;
}

aswell but didn't work :/

Hi Fabio,


Are you sure you are defining the CSS on the webscreen CSS editor?

If yes and if its still not working - one possibility is that the CSS is being overridden by OutSystems.

You can in that case try:

[id$="MainContent"] {
  word-wrap: break-word !important;
}


or

div.content-middle {

 word-wrap: break-word !important;

}


Chetan Yewale wrote:

Hi Fabio,


Are you sure you are defining the CSS on the webscreen CSS editor?

If yes and if its still not working - one possibility is that the CSS is being overridden by OutSystems.

You can in that case try:

[id$="MainContent"] {
  word-wrap: break-word !important;
}


or

div.content-middle {

 word-wrap: break-word !important;

}



Managed to figure it out, was able to make it work with

div.content-middle {
  word-break: break-word;
}

but remembered if I had a big worth on the margin of the cell it would break it, wouldn't make sense.

So I edited the gigantic field I did without white spaces and 

div.content-middle {
  word-wrap: break-word;
}

Worked! Your solution worked all along, but since the field didn't have a single white space it would never break!


Thank you for your help!

Fábio Rodrigues wrote:

Chetan Yewale wrote:

Hi Fabio,


Are you sure you are defining the CSS on the webscreen CSS editor?

If yes and if its still not working - one possibility is that the CSS is being overridden by OutSystems.

You can in that case try:

[id$="MainContent"] {
  word-wrap: break-word !important;
}


or

div.content-middle {

 word-wrap: break-word !important;

}



Managed to figure it out, was able to make it work with

div.content-middle {
  word-break: break-word;
}

but remembered if I had a big worth on the margin of the cell it would break it, wouldn't make sense.

So I edited the gigantic field I did without white spaces and 

div.content-middle {
  word-wrap: break-word;
}

Worked! Your solution worked all along, but since the field didn't have a single white space it would never break!


Thank you for your help!


Welcome.