Sticky Fields in Free version

Hello @dhevilz

Thank you very much for using our plugin. You can assign a custom class name to the field, for example, sticky

The class names are assigned to the fields through their attributes “Add CSS Layout Keywords”.

And then, enter the style definition through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png)

#fbuilder .cff-number-field{
position: sticky !important; 
top: 52px !important; 
z-index: 9999 !important;
}

Best regards.

but, how to sticky in container controls like fieldset or div?
https://prnt.sc/Xtv36NSGR1Ke

Hello @dhevilz

The process is the same, you can assign the sticky class name to the container field.

Best regards.

but, not works at me..

i’dont add css rule in form settings..

when i clicks “Form Setting”, its always pointed to add css in “Form Name” not in fieldset (Field Type: Fieldset)

Hello @dhevilz

The “Form Settings” tab contains the “Customize Form Design” attribute. It is a styles editor with text highlighting and error syntax checks. Through this attribute, you can redefine the plugin styles and define new ones. If you want the container field has a sticky behavior, you should enter the sticky class name through the “Add CSS Layout Keywords” attribute in the container settings, and enter the new style definition through the “Customize Form Design” attribute in the “Form Settings” tab:

#fbuilder .cff-number-field{
position: sticky !important; 
top: 52px !important; 
z-index: 9999 !important;
}

Best regards.

Can you go to youtube in this link?

this is my video, and this trouble with form setting..

Video Youtube

Hello,

That’s is correct. The “Customize Form Design” attribute belongs to the form, not the specific field. For this reason, when you select the “Form Settings” tab, the plugin sets the focus in the header section.

So, you simply should select the “Form Settings” tab, as you did in the video, and enter the styles definitions through the “Customize Form Design” attribute. Note you can define the sticky class name only once but assign it to multiple fields in the form.

Best regards.

ok, thank you very much..

how about sticky in calculated field?

Hello @dhevilz

The solution is exactly the same.

You defined the sticky class name through the “Customize Form Fields” attribute. And now, you can assign this class to the fields you prefer.

You can assign a class name to a field through its “Add CSS Layout Keywords” attribute.

Please, read my previous answers.

Best regards.

i’m so sorry, but.. in my case, sticky is working on teks fields only, in calculated fields is not working …

Hello @dhevilz

I checked your form (https://pajak.dhevilz.com/bruto/) and you did not follow my instructions. You have not created the sticky class or assigned it to the fields.

I entered the class definition and applied it to the form at the runtime to test it. Please, watch the following video:

https://resources.developers4web.com/cff/tmp/2022/08/24/video_o.mp4

Note that I assigned the sticky class name to the field that contains the calculated fields. The calculated fields are distributed in columns, and the stick position does not work properly with floating elements.

Best regards.

I’m So Sorry, Can you check again in (https://pajak.dhevilz.com/penjumlahan/)

in the top of fields, i add sticky like your instruction https://prnt.sc/KfDSdw19NI3Z
but, in this field i set read only https://prnt.sc/YjquNiKvEKw6

Hello @dhevilz

Your website is not loading our plugin files. It is trying to get the files from a CDN server that I assume you configured on your website (https://cdn.dhevilz.com/wp-content/plugins/calculated-fields-form/js/cache/all.js?ver=1.1.106), but your CDN responds with a “404 Error, file not found”

Best regards.

ah,, i see..
i forgot to put that code in my cdn …
thank you very much …