1 Reply Latest reply on Aug 18, 2008 7:50 PM by shadowcreeper

    Left-most column locked in rich:dataTable

    shadowcreeper Apprentice

      I have been trying to come up with a clean way in both FF and IE to create a locked header column (the left-most column) in a dataTable.

      I first tried scrollableDataTable, but it isn't clean (works great in FF, but IE has layout bugs).

      I have found a CSS based solution (allowing you to use a plain old rich:dataTable component):

      The CSS code follows. This requires 2 rich:column components for each locked column. Unfortunately in FF they must have the same width so that sizes match up (this means a hard-coded number of pixels). The border rules may need to be tweaked to fit both FF and IE depending on how you had them setup.

      /* position:absolute only locks columns in FF, it also requires a place holder to keep from overlapping content */
      td.locked, th.locked {
       width: 100px;
       position: absolute;
       z-index: 100;
       border-top: none;
       border-left: 1px solid #A0A0A0;
       padding: 3px;
      td.lockedPlaceHolder, th.lockedPlaceHolder {
       width: 100px;
       display: block;
       z-index: 0;
       border-top: none;
       border-left: 1px solid #A0A0A0;
       padding: 3px;
      /* position:relative only locks columns in IE, it also breaks borders in FF */
      [if IE] td.locked, th.locked {
       width: 100%;
       position: relative;
       left: -1px;
       border-bottom: none;
       border-top: 1px solid #A0A0A0;
      /* border tweaks */
      [if IE] tr.rich-table-subheader td.locked, tr.rich-table-subheader th.locked { border-top: none; }
      /* IE does not require a place holder so we hide it */
      [if IE] td.lockedPlaceHolder, th.lockedPlaceHolder { display: none; }

      The above has only been tested in FF3 and IE7.

      I hope this can help the other people who have also been trying to deal with this problem.

      If anyone has a better solution, please let me know. Any and all help/advice is much appreciated.