Question

I have a situation with a loading bar I have in my application. The problem is that if I have a scrolling table, if one of the table rows is displaying the loading bar, while the loading is happening, if the user scrolls the table up or down, the loading bar image stays where it is while the user is scrolling the table, so it looks like the loading bar is in the foreground and the table is scrolling in the background.

I simply want the loading bar to stay within its rows when the user scrolls the table, how can the css be changed for this to be achieved?

Below is the html for the loading bar:

<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p>

Below is the css of the loading bar and the scrolling table:

//loading bar

    .imagef1_upload_process{
        position:absolute;
        visibility:hidden;
        text-align:center;
        margin-bottom:0px;
        padding-bottom:0px; 
        }


//scroll table

#details{
    height:500px;
    overflow:auto;
}

Answer 1

You have the loading bars position set to absolute. To position it absolutely INSIDE another container the containing element needs a position attribute too.

So whatever is containing that loading bar needs position:relative; added to it’s CSS. That should do it.