The button behind the table appears when the user scrolls through all the lines.

Question

I want to show a large table to users. To make sure that they see all the data before moving on to the next step, I want to hide the "Next" button so that it is visible only after the user scrolls through all the lines.

I would also like the button to look so that the button was always hidden at the table, and the button did not appear and did not exist.

So far, I have experimented with fixed positions and z-indices as follows:

<div id="container> <table id="table" class="table"> <!-- a lot of rows, asynchronously bound with images in some cells --> </table> <button id="button" class="nextButton"> next </button> </div> 

and using css:

 .nextButton { position: fixed; bottom: 0px; right: 0px; z-index: -1; } .table { background-color: white; width: 100%; } 

Now the button is unavailable if the table is larger than the window, since the height of the page content does not take into account the height of the button. Therefore, I try to artificially increase the height using code, for example

 $(window).load(function() { var height = $("#button").height(); $("#container").height("+=" + height); }); 

JSFiddle (note that you must resize the Result area so that it is small enough for the table to hide the button), but I ran into questions about it.

The first problem is that I would rather do it declaratively. Secondly, the button cannot be pressed, because even if it is visible, the browser seems to believe that I click on the div. Finally, all of this is in the angular project, and window.ready doesn't seem to always work as expected.

What am I doing wrong?

Answer 1

The fixed size button may not enlarge the document, but you can use the table margin .

Enter a margin-bottom table with a value greater than or equal to the height of the buttons:

 .table { background-color: white; width: 100%; margin-bottom:50px; } 

Here is the fiddle