I am working on a web app in OutSystems 11.

I have created a 6x4 table inside a container which is the width of the screen, and am populating it with data I retrieve using an aggregate. I have 2 questions:

Q1. I want each column to have the same width (enforcing word wrapping when necessary). How can I achieve this?

Q2. The text retrieved from the aggregate is formatted with spaces in the text representing the following:

1 space: a normal space

2,4,6,etc spaces: 1,2,3,etc line breaks

3,5,7,etc spaces: a normal space followed by 1,2,3,etc line breaks

How can I make the text from an aggregate field be displayed with line breaks in the table cell? Each cell currently contains either a label, or an expression that references a field in an aggregate.

Here is an example: line 1  line 2    line 4

line 1

line 2


line 4

Thanks for any help,

Ryan

Hi, friend!

Q1 - Set the width of each cel of the column (Header row and row) to 3 col (like the img). Set the height of the cell row to auto.

Q2 - Can you explain better how exactly you want make it look?


Best regards

Hi,

You can use below like that to align your element.I used something similar in my project

.fields{display:table}
.fields-row{display: table-row;}
.fields-row b{display: table-cell}


<div class="fields">

                <div class="fields-row">
                    <b>Previous Password:</b>
                    <input type=text />
                </div>
                <div class="fields-row">
                    <b>New Password:</b>
                    <input type=text />
                </div>
                <div class="fields-row">
                    <b>Retype Password:</b>
                    <input type=text />
                </div>
            </div>
        </div>

Result:-

Thanks for your reply Lenon. I really appreciate the help.

 Regarding Q1, I have added a couple pictures below that demonstrate my problem. I have the width of every cell in the table set to 3 col (I have attached a screenshot of 1 cell, but all 24 are set like this). If the text in all of the columns is less than 3 col wide, all of the cells are spaced evenly. However, if one cell has a long string of text, the cell width is being overridden. It looks like the problem is the cell doesn't want to allow more than a few lines to be displayed, so it overrides the cell width I set to make it all fit on a few lines.

I have also tried setting the height of all of the cells to auto in their properties tab, and I have tried setting the height to auto for all of the rows in the styles tab. Any ideas on how I can force the cells to be the same width and just get taller?




Regarding Q2, I have a database column that has text in it. If there is a single space between words, the space should just be treated as a normal space. However, if there are 2 spaces between words, a line break should be inserted. If there are 4 spaces between words, 2 line breaks should be inserted. Below is another example that hopefully makes it clearer what I am trying to do...it may be kind of hard to see, but there is 2 spaces between '1' and 'a', so a line break is inserted, and there are 4 spaces between '2' and 'yet' to 2 line breaks are inserted

text retrieved from database: 

line 1  a new line 2    yet another line 4

How text should display in cell

line 1

a new line 2


yet another line 4


Lenon Manhães wrote:

Hi, friend!

Q1 - Set the width of each cel of the column (Header row and row) to 3 col (like the img). Set the height of the cell row to auto.

Q2 - Can you explain better how exactly you want make it look?


Best regards



I'm still working on Q2, but I figured out Q1 - how to force the cell widths. In the Cell Properties tab, I set the extended property width = "25%" Here are pictures of what I did so it may be of use to someone else:




Ryan Rigby wrote:

Thanks for your reply Lenon. I really appreciate the help.

 Regarding Q1, I have added a couple pictures below that demonstrate my problem. I have the width of every cell in the table set to 3 col (I have attached a screenshot of 1 cell, but all 24 are set like this). If the text in all of the columns is less than 3 col wide, all of the cells are spaced evenly. However, if one cell has a long string of text, the cell width is being overridden. It looks like the problem is the cell doesn't want to allow more than a few lines to be displayed, so it overrides the cell width I set to make it all fit on a few lines.

I have also tried setting the height of all of the cells to auto in their properties tab, and I have tried setting the height to auto for all of the rows in the styles tab. Any ideas on how I can force the cells to be the same width and just get taller?




Regarding Q2, I have a database column that has text in it. If there is a single space between words, the space should just be treated as a normal space. However, if there are 2 spaces between words, a line break should be inserted. If there are 4 spaces between words, 2 line breaks should be inserted. Below is another example that hopefully makes it clearer what I am trying to do...it may be kind of hard to see, but there is 2 spaces between '1' and 'a', so a line break is inserted, and there are 4 spaces between '2' and 'yet' to 2 line breaks are inserted

text retrieved from database: 

line 1  a new line 2    yet another line 4

How text should display in cell

line 1

a new line 2


yet another line 4


Lenon Manhães wrote:

Hi, friend!

Q1 - Set the width of each cel of the column (Header row and row) to 3 col (like the img). Set the height of the cell row to auto.

Q2 - Can you explain better how exactly you want make it look?


Best regards





Solution

I figured out how to insert NewLine() anywhere there are 2 consecutive spaces in a string:

1. Enable Regex_Replace in the Text extension.

2. Create a function (I named mine NewLineFcn) that takes text as input and gives text as output

3. In the function, add a Regex_Replace screen action and provide it the following inputs:

     Text: text you want formatted

     Pattern: In my case my pattern is "  " (two spaces)

     Replace: NewLine()

4. In the cell, instead of setting the value to myInputString, set it to NewLineFcn(myInputString). Now, every place in the string has been replaced with a NewLine() and the NewLine's are properly displayed in the table.


Hope this helps someone.

Solution