Forum:

HTML Pages with CSS and JavaScript

Fixed Table Header and changing classes

Greenhorn

Posts: 3

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hey folks.

First time poster, be gentle with me.

I am currently having an issue with an internal webiste that has been causing me considerable grief.

I have tables with fixed header rows that are working well, with one very irritating exception.

We use an method on our text boxes to perform validation.

If the field has an error, we change the color of the text box to represent this. If the field is fine, we set it to the original color it was before we flagged it as an error. Pretty normal, right?

Well, this is when things get interesting. If the user scrolls down any amount in the table, and then clicks in and then out of the field, triggering the onblur, the fixed header jumps right out of the table. It's as if the top value is being set to where it WOULD have been in the table had the position not been set to relative. Further scrolling will not move the header from it's position on the page, until the onblur triggers again, with the header moving to a different position.

The problem is not with the onblur event or the text boxes. I have placed a button outside of the table and container div, and used it to cause the same problem by changing the class of a tr or td.

Some more background info before I post code.

1 It only occurs in IE7. (The only browser I need to support.)

2 I know a way to fix the problem using an expression involving scrollTop on the headerRow, but I'd like to avoid it for performance reasons.

3 The table MUST be variable width.

4 I absolutely need to set a class, and not set individual styles. I have 100+ pages that use the validation classes in the js validation routines.

5 The outer table is only there to force the container div to be the width of the scrolling table.

Here's the code. Sorry for the size. Make sure to change onblurMeth to onblur before trying this sample.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
 
<style type="text/css">
 
HTML {
height:100%; 
max-height:100%; 
padding:0px; 
margin:0px; 
background:rgb(240, 250, 256);
}
 
BODY {
height:100%; 
max-height:100%; 
padding:0px; 
background:rgb(240, 250, 256);
}
 
#pageSpace{
height:100px;
}
 
.testClass{
color:red;
}
 
#tableContainer {
border: 1px solid Black;
height: 200px;
overflow-Y: scroll;
}

#fixedHeader tr {
position: relative;
background-color:cyan;
}
 
</style>
</head>
<body>
<div id='pageSpace'></div>
<table>
<tr><td>
<div id="tableContainer" >
<table>
<thead id="fixedHeader">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</thead>
<tbody class="scrollContent">
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>  
  <tr>
     <td>Cell Content</td>
     <td><input type="text" name="sampleText" value="Text element" onblurMeth="this.className='testClass'"/></td>
  </tr>
</tbody>
</table>
</div>
</td></tr>
</table>
</body></html>

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

So when the browser redraws the element it forgets what it is doing.

One thing to note is your code will not run in Firefox, look at this:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Eric

Joshua Ewart

Greenhorn

Posts: 3

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks for the reply, Eric.

As I said, it appears as if IE forgets to reset the top position after the inner styles get updated.

And it's an internal company website, so I only need to support IE7. Did you remember to change onblurMeth to onblur?

Also, I have looked at that website multiple times. It does not appear to work in IE7.

Again, thanks for taking the time to look at this.

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I looked at it and could not come up with anything.

Eric

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I had an idea today, you will have to live with a flicker

Eric

stef li

Greenhorn

Posts: 27

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

the direct and correct method to resolve this issue is to use expression in css!
if you use javascript to set the position of header when onscroll invoked, it would not run well as you expect.

like

This guy is so lazy!!!<br />There is nothing left!

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Just a warning: Expressions in CSS can have very bad performance with IE.

Eric

Joshua Ewart

Greenhorn

Posts: 3

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Just a warning: Expressions in CSS can have very bad performance with IE.

Eric

Agreed. Which is why I'm making this change.

Pretty nifty suggestion for that changeClassTest function, Eric.

Unfortunately, I'm working with a VERY large dataset, and even if I cache the elements it's horrendously slow...
Also, I'd need to modify all of my pages that are doing validation to implement it.

Again, that's for the input. I just wish I need why changing the className was causing IE to flip the heck out...

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You might be better off breaking your table into two. One for the header and one for the body. Add a scrollable div with a set height and stick your body table in that. You will either need to hard code the width values of the columns so they line up or use a JavaScript function to figure out the widths and adjust the columns.

Eric

Live a little! The night is young! And we have umbrellas in our drinks! This umbrella has a tiny ad:

Clean our rivers and oceans from home

https://www.kickstarter.com/projects/paulwheaton/willow-feeders