Skip to Content (Press Enter)
2021-09-09 22-42-33
Fábio Rodrigues
748Views
10Comments
Solved
How can I make a table record display a cell in multi line?
Question
OutSystems Widgets
Personal Environment

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?

0
0
24 Oct 2018
Copy Link
UserImage.jpg
Chetan Yewale
Solution

Hi Fabio,


On the webscreen CSS editor you can define the following:

div.content-middle {

  word-wrap: break-word;

}

See solution in context
0
0
24 Oct 2018
Copy Link
2021-09-09 22-42-33
Fábio Rodrigues

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 :/

0
0
24 Oct 2018
Copy Link
UserImage.jpg
Chetan Yewale

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.

1
0
24 Oct 2018
Copy Link
2021-09-09 22-42-33
Fábio Rodrigues

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:

0
0
24 Oct 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

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

1
0
24 Oct 2018
Copy Link
2021-09-09 22-42-33
Fábio Rodrigues

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

0
0
24 Oct 2018
Copy Link
UserImage.jpg
Chetan Yewale
Solution

Hi Fabio,


On the webscreen CSS editor you can define the following:

div.content-middle {

  word-wrap: break-word;

}

0
0
24 Oct 2018
Copy Link
2021-09-09 22-42-33
Fábio Rodrigues

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 :/

0
0
24 Oct 2018
Copy Link
UserImage.jpg
Chetan Yewale

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.

0
0
24 Oct 2018
Copy Link
UserImage.jpg
Chetan Yewale

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;

}


0
0
24 Oct 2018
Copy Link
2021-09-09 22-42-33
Fábio Rodrigues

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!

0
0
24 Oct 2018
Copy Link
UserImage.jpg
Chetan Yewale

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.

0
0
24 Oct 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.