Fixed fields on top of page

[zhihenglin1998 (Zhiheng Lin)]

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?

[andreawhitmer]

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

[faisalahammad]

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?

[zhihenglin1998 (Zhiheng Lin)]

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.

[faisalahammad]

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?

[zhihenglin1998 (Zhiheng Lin)]

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?

[faisalahammad]

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

[zhihenglin1998 (Zhiheng Lin)]

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

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

[faisalahammad]

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.

[zhihenglin1998 (Zhiheng Lin)]

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?