[Plone-UI] Scrolling Table

Ken Winter ken at sunward.org
Wed Aug 13 18:40:49 UTC 2008



Martin Stadler-2 wrote:
> 
> 
> Am 13.08.2008 um 19:55 schrieb Ken Winter:
> 
>>
>>
>> Ronysh wrote:
>>>
>>> I would like to scroll a table within a web page, in such a way  
>>> that the
>>> web
>>> page menu's remain static and only the table scrolls.
>>> Can this be done?
>>> Examples?
>>> 3rd party software?
>>>
>>
>> I need to do this too.  I'm hoping that it can be done with CSS, but  
>> there's
>> one key thing I can't figure out.  So I'm hoping somebody can help  
>> both of
>> us.
>>
>> In your browser, try this piece of HTML:
>>
>> <html><body>
>> 	<h1>Heading</h1>
>> 	<table style="display:block; overflow:auto; border:solid; height: 
>> 200px;">
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 		<tr><td>line</tr></td>
>> 	</table>
>> 	More stuff
>> </body></html>
>>
>> Probably you will see a vertical scroll bar by the table (if not,  
>> make your
>> browser window smaller, and the scroll bar should appear).  This is  
>> what
>> Ronysh and I are trying to do - almost.
>>
>> The "almost" is that the appearance of the vertical scroll bar  
>> depends on
>> the style rule "height:200px", which sets the height of the table as a
>> constant.  What I (and maybe Ronysh) need is for the vertical size  
>> of the
>> table (and the appearance or nonappearance of the vertical scroll  
>> bar) to
>> depend on the size of the user's browser window.  That is, if the  
>> browser
>> window is high enough to display the whole page (the table and  
>> everything
>> above and below it), it should do so without any scroll bar on  
>> either the
>> browser window or the table.  If not, the table's display is the  
>> component
>> that should be contracted, and a vertical scroll bar should appear  
>> to let
>> the user scroll through the table.
>>
>> So, the one key thing that I can't get is:  How to replace the
>> "height:200px" constant on the table so that:
>>
>> a) the whole page (including the header, the table, and the "More  
>> stuff"
>> line) is crammed vertically into the user's browser window,
>>
>> b) if it doesn't all vertically fit: the overflow is taken out of  
>> the table
>> and a scroll bar is displayed next to the table to make the whole  
>> table
>> accessible, and
>>
>> c) the browser itself doesn't have to display a vertical scroll bar,  
>> unless:
>>
>> d) the browser window is so vertically shallow that it can't even  
>> show the
>> whole header and "More stuff" line.  In this case, it will let the  
>> page
>> overflow the window, and it will show a vertical scroll bar.  That's  
>> OK, as
>> long as the preceding requirements are satisfied.
>>
>> ~ TIA
>> ~ Ken
>>
> 
> 
> As far as I know all CSS *only* refers to the dimensions of the  
> document (the page) and is totally independent of the window so I  
> don't see a way to do what you're looking for. You need to have a  
> layout with fixed height for all the involved elements.
> 
> Martin
> 
> 
> _______________________________________________
> UI mailing list
> UI at lists.plone.org
> http://lists.plone.org/mailman/listinfo/ui
> 
> 

Thanks, Martin.  From everything I've learned in the last day about CSS, I'm
afraid you're right.

Next question: 

Does anyone know if Javascript is capable of knowing the dimensions of the
browser window, so that a Java script could be used to limit the height of
the whole page to the height of the browser window? 

If so, then perhaps the CSS "overflow:auto" rule could take care of
displaying the scroll bar (or not) on the table.

~ TIA
~ Ken
-- 
View this message in context: http://n2.nabble.com/Scrolling-Table-tp684407p722555.html
Sent from the User Interface & Design mailing list archive at Nabble.com.





More information about the UI mailing list