How to assign fixed position to a grid element?

[R2R]

I've been trying to use the header element to resolve the issue, but the header element doesn't seem to work the way I want. So, I removed the header from the page and added a grid element at the top. I have a grid element with 1 column and 2 rows. In the first row I added another grid with 2 columns and 1 row. That's where the two buttons (List of Terms and Feedback) are located. Below the buttons is the actual term name (ex: "ANOVA"). I want the grid with the two rows to remain fixed on the page and not scroll with the content.

I've created a css element called "formatHeader" with the following code and added it to the grid element "headerGrid":

.headerGrid
{
position: fixed;
}

This doesn't seem to work. How do I prevent "headerGrid" from moving with the content?

[R2R]

By the way, if I do use the header element on the page, which by default is "fixed" I get the result I want, except that there is a lot of empty space above the buttons at the top of header, and I can't seem to remove it. So, I don't mind using the header element if there is a way to remove that empty space. See attached image. Thanks.

[Yurii Orishchuk]

Hi R2R,

Please following CSS code instead of yours:

pre

.headerGrid{
position: fixed;
top: 10px;
}

/pre

Regards.

[R2R]

Thanks for responding, Yurii, but this code didn't work either. See images below.

[Yurii Orishchuk]

Hi R2R,

Did you try to adjust top property in accordance to your needs(decrease top empty space)?

Regards.

[R2R]

Yes, I've also tried the following:

.headerGrid{
position: fixed;
top: 0;
}

...and the result is the same (see image below).

[KorryRogers]

Here's how I do it:

Put the grid inside your header and then add this CSS to remove the blank space at the top of the header:

.ui-title { display: none !important; }

[Yurii Orishchuk]

Hi R2R,

Please try to adjust with different values.

For example:

top: -10px;

top: -50px;

etc..

If you can not get it to work please give us your app public link and describe steps to reproduce this problem.

Regards.

[R2R]

Thanks Korry - this worked for me.

[R2R]

Yurii, thanks for your help. I was able to get it to look right with Korry's code above.