Guillaume CR Guillaume CR - 3 months ago 8
CSS Question

Button behind table appears when user scrolls past all rows

I want to display a large table to users. To ensure they see all the data before they proceed to the next step I want to hide the "Next" button in a way that it will only be visible after the user has scrolled past all the rows.

I would also like it to look like the button was hiding behind the table all along, instead of having the button pop in and out of existence.

So far I have experimented with fixed positions and z-indexes like this:

<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 with css:

.nextButton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: -1;
}

.table {
background-color: white;
width: 100%;
}


Now the button is not accessible if the table is larger than the window, as the page's content height does not take into account the button's height. So I try to increase artificially the height with code such as

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


JSFiddle (note that you must resize the "Result" pane so that it is small enough for the table to hide the button) but I have run into issues.

The first issue is that I would much prefer do this declaratively. Second, The button cannot be clicked as even though it is visible, the browser seems to believe I am clicking the div. Lastly, all this resides in an angular project, and window.ready doesn't seem to always trigger properly.

What am I doing wrong?

Answer

The fixed sized button may not make the document grow, but you can use margin of the table to do so.

Give your table margin-bottom with value larger than or equal to the buttons's height:

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

Here is the fiddle

Comments