Forum | Appery.io

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?

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.

Hi R2R,

Please following CSS code instead of yours:

pre

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

/pre

Regards.

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

Hi R2R,

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

Regards.

Yes, I've also tried the following:

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

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

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; }

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.

Thanks Korry - this worked for me.

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