Fixed fields on top of page

I am trying to “freeze” some fields to the top of the page.

With CSS I could called position: fixed, but how do I assign this to specific fields?

Each field has a unique ID you can call in your CSS, which is a combination of the form ID and the ID of that specific field. For example, if you want to control a field with ID 1 on a form with ID 44, the ID would be #field_44_1. So your CSS would look something like this:

#field_44_1 {
     position: fixed;
}
1 Like

Hi @zhihenglin1998
The best way would be to give a specific class name to all your fields, which will be used to get the custom CSS. Suppose you’d like to assign the “position: fixed” to multiple fields from multiple forms. You could set a special class to all those fields (ex: fixedtop). You’ve to go to the Field Settings → Appearance → Custom CSS Class to assign a new custom class name.

So you won’t have to collect all the field IDs manually. Could you please try it and let me know how that goes?

Thanks for your response.

I am having trouble finding the Gravity Form’s style sheet, may I have some pointers?
I have tried adding the fixedtop css class into my theme’s style.css but it still did not work.

Hi @zhihenglin1998
Sorry for the delay. You could go to WordPress Dashboard → Appearance → Customizer → Additional CSS to insert the custom CSS to apply on the Gravity form.

Could you please try it and let me know how that goes? :smiley:

Hi,

Thanks for the pointer.
When I tried to add overflow: hidden to the class, none of the checkbox fields are hidden as I scroll down. Any clue why this is the case?

Hi @zhihenglin1998
Could you please share your form settings and CSS code? So I can take a look and help you to fix this.

The css class was applied to a Section field. Here is the css code:

.fixedtop{
  overflow: hidden;
  position: fixed;
  top: 600px;
  width: 100%;
}

Hi @zhihenglin1998
I’m not sure if I am permitted to ask for your website URL or not. It might be better if you contact GF support. They will get more access to investigate further.

Thanks for your help. I have noticed, when ever I applied fixed position, the field will go to background and other fields gets pushed up. Any thoughts on why this may be?

Edit: It seems that the body have overflow hidden, which prevents position sticky from working. Where in GF do I go to change Overflow?