You are viewing limited content. For full access, please sign in.

Question

Question

background behind fixed pagination tabs

Forms
Updated January 29, 2020
asked on January 28, 2020

I have a form where I have coded my pagination tabs to stay on the screen during scrolling. It works, but I would like to create a background the covers the entire width of the form, or find a way to make the form title itself to stay on the page. I think this would make it look better and I was hoping to cover the background info that can be seen behind the tabs. I have a snip below taken during scrolling.

Not the info behind the tabs. I don't want to see it. My margins are set a 0.

Her is my CSS..  

.cf-pagination-tabs {position: fixed;top: 0px;margin:0;z-index:1;}

 

0 0

Answer

SELECTED ANSWER
replied on January 29, 2020 • Show version history

You're on the right track with position: fixed. I was able to lock the whole header with the following:

#cf-formtitle {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0px;
}

.cf-form {
    margin-top: 100px;
}

The margin on the form itself needed. Otherwise, the form will partially be behind the header. I haven't tested this for all scenarios, so you'll want to verify it works for you.

0 0
View 1 previous reply
replied on January 29, 2020

If I use the width at 100% it goes beyond my form.

I change the width to 900px, which is the width of my form. This seems to be working. 

Thanks for your help.

 

0 0
replied on January 29, 2020

I do see an issue with my solution though...it is not as adaptive to smaller screens.

0 0
replied on January 29, 2020

This can get complicated fast. I had a smaller window so that I could force it to scroll, but I didn't realize that the parent element was actually the whole width of the window.

My initial thought had been to use position: sticky, but that won't work on IE11. However, I'm on a bit of a scorched earth crusade in that regard, so forget compatibility for a moment.

Try this:

#cf-formtitle {
    position: sticky;
    z-index: 1;
    top: 0px;
}

Remove all of the other customizations, and see what that does for you. IMO it works great in every browser except IE11. In that case, it just behaves like the stock form title.

0 0
replied on January 29, 2020

That works even better. Tried it on several screen sizes.

Thanks again!

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...