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
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.
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
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
a new line 2
yet another line 4
Lenon Manhães wrote:
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:
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:-