[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