How to Specify a TableWidget Width in portlet

Viewpoint
N/A

How to Specify a TableWidget Width in portlet

we are trying to utilized the TableWidget to show some data which has over 10 columns, How could we change the TableWidget width to make them readable? I tried the width="800" height="200" in summary.jsp as bellow.

[vp:tableWidget context="${context}" model="${simpleTable}" refreshInterval="10" refreshUrl="/WidgetopiaPortlet/dataserver/updateTableData" width="800" height="200" htmlAttrs='id="foo23" border="1"' /]

but doesn't work and stick to width with 440 px like. But the same width and height parameters work for sparkline and graphwidth. Could you help us explain that?
14 REPLIES
Teradata Employee

Re: How to Specify a TableWidget Width in portlet

The portlet container has overflow:hidden.
You need to stick the widget inside a container with overflow:auto.
N/A

Re: How to Specify a TableWidget Width in portlet

thanks for the tip. then how could we specify the container in css?
Teradata Employee

Re: How to Specify a TableWidget Width in portlet

Jian,

If you are trying to make the portlet wider to fit all your columns, this will not work. There is code in place that prevents the portlet from widening beyond it's size. Rumplestiltskin's suggestion will work if you want a scroll bar at the bottom of the table's container that allows you to scroll horizontally for view all columns.
Teradata Employee

Re: How to Specify a TableWidget Width in portlet

Try sticking your widget in a container div that has overflow viewable:

<div style="overflow:auto;">
<vp:tableWidget context="${context}" model="${simpleTable}" refreshInterval="10" refreshUrl="/WidgetopiaPortlet/dataserver/updateTableData" width="800" height="200" htmlAttrs='id="foo23" border="1"' />
</div>

Inline styling not recommended... ;)
N/A

Re: How to Specify a TableWidget Width in portlet

thanks Lewis, width seems works for sparklineWidget and graghwidget. but doesnt work tablewidget. I tried the code you gave, still not work. another attempts include the .portlet-modal {width:800px} .portlet-modal-backdrop{width:800px}. nothing change. Then how could we do it by scroll horizontally ?
Teradata Employee

Re: How to Specify a TableWidget Width in portlet

Jian,

Try two things:

1. Try removing a width and height from the chart to see if it draws it correctly for you.
2. Try making your width and height a much smaller value (smaller than the size of the portlet) to see if your overflow scrollbars are being hidden
N/A

Re: How to Specify a TableWidget Width in portlet

First of all, we notice the tablewidget has default 16 rows and vertical scroll happens if over 16 rows filled in. but the horizon scroll never work till now. there are what I tried.

1) removed the width.

does not work.

2) reduce the width to 200




no horizontal scroll.

N/A

Re: How to Specify a TableWidget Width in portlet

the jsp code for three tests.

1) [div style='overflow:auto' ]
[vp:tableWidget context="${context}" model="${simpleTable}" refreshInterval="10" refreshUrl="/WidgetopiaPortlet/dataserver/updateTableData" width="200" htmlAttrs='id="foo23" border="1"' /]
[/div]

2) [div style='overflow:auto' ]
[vp:tableWidget context="${context}" model="${simpleTable}" refreshInterval="10" refreshUrl="/WidgetopiaPortlet/dataserver/updateTableData" width="200" htmlAttrs='id="foo23" border="1"' /]
[/div]

3) [div style='overflow:auto;width:800' ]
[vp:tableWidget context="${context}" model="${simpleTable}" refreshInterval="10" refreshUrl="/WidgetopiaPortlet/dataserver/updateTableData" width="200" htmlAttrs='id="foo23" border="1"' /]
[/div]
N/A

Re: How to Specify a TableWidget Width in portlet

Lewis, I found that the width="800" works in IE (I use 6.0) though the tablewidget bound is still fixed, but on Firefox browser, the table width still the fixed. I am talk about 13.0.1.1. not 13.0.0.1