Make Grid float to bottom of screen

[Tommy B]

I would like to be able to make a grid position itself to the bottom of the screen. I am sure this can be accomplished with CSS.

Does anyone have a hint they could share?

[maxkatz]

Do you want the grid always be positioned at the end of the screen -- as you scroll down?

[Kateryna Grynko]

Hi,

Here is one way to do it.

In Grid properties, field Class name write "bottomGrid".
Then create CSS asset with the following code:
code.bottomGrid { position:absolute; bottom: 32px; }/code
32px is Footer height. If there are buttons or navbar in footer then change the value to a real footer height.

[Tommy B]

yes please.

[Tommy B]

Ok...now i feel dumb. Sorry to waste your time.

[Tommy B]

Just an update. I needed to also set the left margin to get the grid to stop over-sizing my mobile screen and also set the bottom margin of the element just above the footer to 20 and reduce the grid size to 98% so that the elements did not overlap.

[Maryna Brodina]

Hello! Use next CSS:

code.bottomGrid {
position:absolute;
bottom: 32px;
margin: 0 0 20px 0 !important;
width: 98% !important;
}/code

[Murali]

hi Maryna,

I am trying to place a grid at the bottom of the screen. My screen does not have a footer. When I use any of the methods (CSS) descried in the forum to do that, the width of the grid increases.

If you place a grid on the screen and make one of the rows opaque (background transparent: false) and try using the CSS method to fix the grid to the bottom of the screen, you will notice that grid width will change. How to fix the grid to the bottom of the screen without any changes to the grid width?

[Evgene Karachevtsev]

Murali,

Please try:
preposition relative;
bottom: 5px;/pre