FLUID-4037: Review new scrolling table styles and add to FSS demo

Description

scrolling table was added to fss-layout with these styles:

/* scrollable table with fixed header */
.fl-table-scrollable-container { /* space for fixed header */
position:relative;
padding-top:2em;
}

.fl-table-scrollable-area {
max-height:160px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}

.fl-table-scrollable-area table thead tr { /* fixed table header */
left: -1px;
top: 0;
position: absolute;
}

Make sure the naming convention is correct, will work generally (right now just used in uploader), then add an example to the FSS demo.

Attachments

• FLUID_4037-b.patch
• FLUID_4037-c.patch
• FLUID-4037.patch

Comments

• heidi valles commented 2011-01-25T17:41:03.191-0500

  This patch renames scrolling table styles in fss-layout.css, adds an fss demo, tweaks Uploader.css, and updates FluidView.js

• heidi valles commented 2011-01-25T17:45:37.391-0500

  Requires patch from 3837 first

• heidi valles commented 2011-01-26T10:07:21.535-0500

  Remake patch to svn add new demo files, test on windows.

• heidi valles commented 2011-01-28T13:27:50.351-0500

  Cleaner patch created after fluid-3837 commit.

• heidi valles commented 2011-01-28T13:29:59.712-0500

  hey c, could you review this patch? It cleans up the fss-layout classes (and tweaks the fluidview.js and uploader.css to match) and adds the fss demo

• heidi valles commented 2011-01-31T16:18:49.669-0500

  fl-table is a better namespace to use (vs fl-scrollableTable), in case future table css is added to fss.

• Colin Clark commented 2011-02-02T18:57:35.802-0500

  Heidi, I've committed a mildly tweaked version of your last patch to a Github repo: https://github.com/colinbdclark/infusion-FLUID-4037
  I can't get the scrollable table (either the demo or the Uploader) to work with IE6. I corrected a few stray commas that was causing things to freak in IE; can you take a look and see if you can iron out the styling quirks?

• heidi valles commented 2011-02-07T13:00:48.658-0500

  Pushed fix - added refreshView() to scroller component, which checks the height of the scrollable area and sets it inline (IE6 req's a height style) if it's over the max-height. Also added function to uploader's refreshView function.

• Colin Clark commented 2011-02-07T15:59:27.750-0500

  Needs linting and a strategy for supporting a default max-height when appropriate. Users might want to specify a max-height by overriding the CSS, or alternatively passing in a default value to the fluid.scrollable() component's options. We should support both.

• heidi valles commented 2011-02-07T16:32:49.760-0500

  Linted.

  We currently do support max-height by both overriding css and passing as option. The issue is what do we do when neither of these are set. fss-layout.css contains a default max-height for scrollable tables, but if the scrollable isn't an fss scrollable table (or not a table at all), and doesn't have max-height set, what should be done?

  It might make sense to not do anything. If it's not set, a height shouldn't be imposed.

• Michelle D'Souza commented 2011-02-11T11:32:12.159-0500

  git branch was pushed to the Infusion project repository and a minor modification was made in commit 2d86df20d4c35d619b78d7e8731de95887fd42e3.

• Justin Obara commented 2011-03-04T13:54:37.767-0500

  This feature was pulled from 1.3.1 due to some bugs with absolute positioned items (i.e. the progress bars)

• Justin Obara commented 2011-03-04T13:55:18.814-0500

  Some information about scrollable tables from Gary http://old.nabble.com/Scrolling-Table-to31062898.html

• Anastasia Cheetham commented 2014-04-02T15:49:53.268-0400

  We're deprecating FSS.