The portlet container has overflow:hidden.
You need to stick the widget inside a container with overflow:auto.
thanks for the tip. then how could we specify the container in css?
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.
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... ;)
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 ?
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
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.
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]
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
I think this problem is still unsovled yet. will support the resize in next version?
Jian,
This is working fine for me, why don't you give it a try?
.widgetopia .tableContainer { width:450px; overflow:auto; position:relative }
.widgetopia .tableContainer td { width:200px }
Sorry, Jian,
This blog software is not smart enough to properly escape my code. Here it is again:
.widgetopia .tableContainer { width:450px; overflow:auto; position:relative }
.widgetopia .tableContainer td { width:200px }
OK, here I have replace angle brackets in my code with square brackets.
[style]
.widgetopia .tableContainer { width:450px; overflow:auto; position:relative }
.widgetopia .tableContainer td { width:200px }
[/style]
[div class="widgetopia"]
[vp:tabs id="${context}widgets" context="${context}" hiddenRender="true"]
[vp:tab context="${context}" label="Table"]
[div class="tableContainer"]
[vp:tableWidget context="${context}" model="${simpleTable}" refreshInterval="10"
refreshUrl="/WidgetopiaPortlet/dataserver/ updateTableData" width="600" height="200" htmlAttrs='id="foo23" border="1"' /]
[/div]
[/vp:tab]
Thanks all. I'm at info@coffeesolutions.co.za if there are updates on this topic
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?