TableRecords widget - how to change widths of columns

TableRecords widget - how to change widths of columns

  
Hello everyone and wish you all a happy new year.

I am using the TableRecords widget to display a lsit of records. I need to change the widths of some of the columns but I cannot find that in any of the table properties!! Can anyone please suggest how to do that in Service Studio?

Thank you all...
Hello Shraim,

If you look carefully to a table record, you can see that it's just a HTML table and there you can apply all the css properties.
As a table property, you can only control the full table width..Although, you can use an inline CSS in the colums you want to control, using the external properties.
For example:



Hope this helps.

Kind Regards,
Gonçalo Martins
Hello,

Happy new year to everyone.

Selected the table cell and then define the width. can be % or px's.
You dont need to use it as extended property because there is a width option in the table cell ;)

Luis Paulo Soares wrote:
Hello,

Happy new year to everyone.

Selected the table cell and then define the width. can be % or px's.
You dont need to use it as extended property because there is a width option in the table cell ;)
 
 
Hello Luis Paulo,

I'm really working too much and needing some vacations and some hours of sleeping..lol....
We all use this
thousands of times and even in my screenshot I had the property right in front of me (shame on me..lol..).
Of course we have a property "width" for a table cell..
Here it is:





Cheers and have a Happy New Year :)



Thank you everyone. I am using the Width property of the Cell but I am trying to understand the rendering behavior. In the attached image, the width of the the column "Cost Center" in both tables was set to 20%. Yet in each table the column seems to adjust its width (best fits) its contents. 
1- Is this behavior by design?
2- Is there a way to have more granual control over the widths of the columns of the table?
3- At design time, do I need to set the width of just one Cell in the column or I have to set the width of both Cells in the column?
 
Hello Shraim,

I think that your problem here is related to the fact that you might not defined the width percentage to all the table columns and maybe the table width to, which you should have set to 100%. 
Another possible problem is the fact that you can have the cell texts breaking the set width (the fields Subjects and Description are some good suspects), and to avoid this you can control it by using the CSS property white-space.
Note also that, since you are working with percentages is more difficult to align both tables because you don't have a fixed size for the column but a variable size according to the occupied space in where the table is placed.

Hope this explanation helps you in something.

Kind Regards,
Gonçalo Martins


Cell width works the same way as in html (http://www.w3schools.com/tags/att_td_width.asp)

The cell width will adjust to the largest column width cell.

In your case, as Gonçalo says, you can use the css property style='white-space:nowrap;' in the extended property of the cost center expression so the line doesnt break down and then adjust the cell width for '1px'. This will make the cell width adjust to the text and not let the text break.

Hope it helps.



Shraim wrote:
Thank you everyone. I am using the Width property of the Cell but I am trying to understand the rendering behavior. In the attached image, the width of the the column "Cost Center" in both tables was set to 20%. Yet in each table the column seems to adjust its width (best fits) its contents. 
1- Is this behavior by design?
2- Is there a way to have more granual control over the widths of the columns of the table?
3- At design time, do I need to set the width of just one Cell in the column or I have to set the width of both Cells in the column?
 
 
 
Hello Luis Paulo,

I think you forget something on your post..maybe your comment.. ;-)
Hi Gonçalo,

I pressed some key wrongly after the reply and it submited the post. I already edited it :)
Thank you Luis and Goncalo. I really appreciate your help guys. It is very valuable knowledge. I will try to use both of your suggestions and hope it works out well...
Hi.
To apply the CSS property white-space, I used the Style Sheet Editor to create the style NoWrapText (see first image). Then I applied the NoWrapText style to the table's HeaderRow (applying it to the container in each cell) and I also applied the NoWrapText style to the table's data Row (applying to the expression in each cell). I did the same to the second table. I also set the width of each cell (in both rows) to a % value such as the total of the values is 100%.
The second image shows the result. As can be seen, the two tables still differ in their column widths.
Is there no other way to control this behavior ?




Hello,


if a cell have text that use more then the width you defined it will auto adjust the width due to the nowrap and may steal other columns widths.
Sample:
<!-- sample html -->

<!DOCTYPE html>
<html>
<body>

<table border="1" width="100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td width="99%">January</td>
    <td style="white-space:nowrap;" width="1%">test test test</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

<p>The width attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
<!-- end sample -->

If you notice the last column isnt 1%. Its more because the cell width will auto adjust to force the value to stay in the same row.

try with pixels instead in a way that their width is enought to consider their column max width.

the
column 'Created by' can have different widths depending on the person name (text) so define a width that can be enought to consider their max name width so it doesnt autoexpand.

I also notice (in your image) that you defined the css on the the web screen. It's better to put it on the eSpace CSS instead so you can use it in all web screens.

Hope it helps.



Shraim wrote:
Hi.
To apply the CSS property white-space, I used the Style Sheet Editor to create the style NoWrapText (see first image). Then I applied the NoWrapText style to the table's HeaderRow (applying it to the container in each cell) and I also applied the NoWrapText style to the table's data Row (applying to the expression in each cell). I did the same to the second table. I also set the width of each cell (in both rows) to a % value such as the total of the values is 100%.
The second image shows the result. As can be seen, the two tables still differ in their column widths.
Is there no other way to control this behavior ?



 
 
Luis Paulo Soares wrote:
 
 
 
Hello Luis Paulo,

Thats a really good example in this context..well done!
I think that with this,
Shraim will have no problem performing his task..this is only simple CSS..

Kind Regards,
Gonçalo Martins
Hi,
As others have said, the only way to ensure that the cells mantain the size is to give them *fixed* sizes (say, 200px). Also, as others have said, this only defines the *minimum* size, so if you want to have a maximum size you have two options:

1. use the Substr function to crop the string;
2. wrap the Text widget in a Container and add the style overflow:hidden to the Container

For more on the last point, check this page: http://www.ezineasp.net/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx

To show the text that won't fit the fixed sized cell you can then use a tool tip, by adding a "title" extended property to the text box.








Thank you everybody. I am sure this thread will prove very valuable to anyone facing issues in understanding sizing of the TableRecords. Summarizing my understainding of the above:

1- When cells width is not set or is set in %, the default behavior for the the cell is to acomedate the content meaning the cell will still grow or shrink depending on its content (cell's minimum and maximum will change depending on content not on defined width)

2- When cells width is set in pixels, the cell width will maintain this width as a minimum (cell will not shrink) but the cell will still grow to accomedate bigger content (cell's minimum will not change but its maximum will change depending on content ).

3- to force a cell width respect the set width in pixels as its maximum; enclose the text in a container and apply to the container the CSS overflow:hidden

4- to change how white space (inclding line breaks and wrapping) is handled in the cell, use the CSS white-space

Thank you both Goncalo and Luis. A special thanks also for Carlos as your followup explanation (specially the tip about the "tool tip") was a prefect complement to the great explanation by Goncalo and Luis. I wil apply this feedback and promise to update you all. 

Oh, sorry, my mistake I didn't explain it correctly.

You can't force a table cell (HTML = <td>) to have a maximum width, you can only force it to have a minimum width. A cell will always expand its width (and height) to accomodate its contents.

The workaround is that you can force a <div> (a Container widget) to have a maximum size (either width or height, or both).

If you put a <div> inside a <td> and set its style to, say, "width: 200px; overflow: hidden;", whatever content inside it that exceeds 200px in width will be cropped. The net result is that the <td> won't expand because its content never expands either.

** A BIT OFF-TOPIC HTML MINI GUIDE **
If you look carefully, the width style doesn't really set the <div> width, it actually sets its maximum width.
An empty <div> will have a width of 0 and will expand to accomodate its content up to the defined maximum width.
This is why you still need to set the width in the table cell but now it's to prevent it from shrinking too much.
 Another way to do it would be to use the min-width style to set the minimum width but  IE at least up to version 8 ignores it.

You can also set the maximum height of a div, just use the height syle. There's also a min-height style to set the <div> minimum height and IE ignores it too.

Also, if you don't set either the width or the height in a <div>, it will behave pretty much like a <td>.


 

This topic is becomming like a CSS discussion so, you should take a look at this excellent site where you'll get all about this and also try them in a html editor provided by them:

http://www.w3schools.com/css/

Enjoy it  :)
I want to continue this thread to the end so not to waste the time and effort of everyone participating. Following the great advise and explanation from this thread, I di the following:

1- created a style HideOverFlowText


2- removed all width settings from the table header cells and row cells

3- for the columns I need to control their widths, I enclosed the content of each cell in a container (both the header and row cells)

4- I applied the HideOverFlowText on each of these containers

5- I used the extended properties of each container to set its desired width (following image)



6- at run-time I got the following behavior for these columns. While the container in each cell seems to have confirmed to its set width in pixels (all are 100px except for Description set to 200px), the width of the table column is still wider than the width of the container in its cell !!!

Check the table width property. If you have for example the value set to 100% and the columns set with a specific width you can (and will) have problems, since you are working with percentage and pixels, ie, different units.
Another
thing you can do is to the the property white-space: normal, this case the text will only occupy the cell width and will only addapt the cell height.

Gonçalo Martins wrote:
Check the table width property. If you have for example the value set to 100% and the columns set with a specific width you can (and will) have problems, since you are working with percentage and pixels, ie, different units.
Another
thing you can do is to the the property white-space: normal, this case the text will only occupy the cell width and will only addapt the cell height.
 
 
 Great..at last I am getting somewhere :) 



now.. if I want the table width to be full (same as using 100% for the table width) meanse I need calculate the pixel width of these columns based on the available width.

1- is this a typical parctice in web development 

2- is there a way at runtime to know the pixeld width of the table's frame

3- is there a way at runtime to calculate and set the pixel width of these columns
Hello,

For runtime tests you can use internet  explorer developer tools (IE) or firebug (Firefox) to edit html - in your case table column widths
Both have F12 key as shortcut.
Hello,
The same for Chrome :)
Nowadays we should test at least in the three main browsers..
Thank you all. A quick summary of my journey with this issue...

1- Width of Table Records should be set in % and typically it should stay as 100%

2- Widths of columns in the Table Records should also be set in %. This width sets only the minimum width of the column. The column (cell) would grow to accomendate bigger content

3- To stop the growth of the cell content beyond the width you set, you have two options (credit for Carlos):
  3-1: use SubStr to limit (cut) the content beyond a certain length and then use either:
       - the extented property title to display the complete content when the user hovers over the cell
       - use visual IF with a AJAX refresh to expand the remaining content by clicking on read more.
         This youtube video explains this pattern in full
         http://www.youtube.com/watch?v=-MroVrPiFLU 

  3-2: enclose the contents of the cell in a Container and set the style of the container to set the width in PIXELS and also use the style overflow: hidden

In summary, if one needs fixed width it has to be in PIXELS not in % and it should be set on a parent element preferably a DIV container

Hope this helps others new to the platform and web development and facing this same issue
That's a good summary for one of the several approaches to take when we want to do something like you wanted.
I'm sure it's gone be helpful for some new guys.
have you tried toying width:

table-layout: fixed;

In a fixed table layout, the horizontal layout only depends on the table's width, the width of the columns, and not the content of the cells

Yes - the table layout was a quick fix - just needed to set individual column widths in pixels.
Thanks you!
Hi Gayatri,

This was an over 3yo thread. It's better not to resurrect them, especially not with a mere "thank you".