Keep button centered when list grows

Keep button centered when list grows

  

Hi!


I've got the following scenario. A table records widget with hundreds of records with a checkbox to pick records and at the end of it two buttons to accept or cancel the records picked. To go through the records I have a search box (to limit the records shown) and the InfiniteScroll component to go through the table records. This app is to be used on a tablet.


My problem is that the user needs to go to the end of the list to click the buttons and due to InfiniteScroll it can only be done when the table records widget has all the records in it.

I was thinking of puting the buttons on the side of the table records widget in a way that they always stay centered with it even when the number of records shown increases or decreases. Or a way that the buttons are visible as we go through all the records.

And therein lies the problem as I can't figure out a way to do it. I've tried with columns and tables but I can't get the buttons to always appear and centered in the screen.


Any ideas how I can get it to work?


Thanks in advance,

Carlos

Hi Carlos,

You can put the buttons in a container that doesn't scroll with the list? E.g. using float?

Solution

Kilian Hekhuis wrote:

Hi Carlos,

You can put the buttons in a container that doesn't scroll with the list? E.g. using float?

Hi Kilian,


Thanks for the help!

As I searched how to use your suggestion (CSS....not an expert....actually just knowledge of the basics) I found a blog entry and learning material that helped me get there!

So I used inline-blocks and for the button added position : fixed 

Everything's like I wanted!


Carlos


Solution

Hi Carlos,

Great to hear it all worked out! (Sorry for the late response, been on holiday.)