Only div to be top aligned

Hello @justinsmith19

* Assign a custom class name to the DIV field, for example: my-top

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

* Enter the following style definition into the “Customize Form Design” attribute in the “Form Settings” tab:

#fbuilder .my-top .fields>label,
#fbuilder .my-top .fields>.dfield{clear:none; display:block;width:100%;}

and that’s all.
Best regards.

Hi

Apologies, as this might be a silly question.

To assign a custom class name to the DIV field, do I simply put my-top in the Add Css Layout Keywords field?

Hello @justinsmith19

Yes, exactly, put the text my-top into the “Add CSS Layout Keywords” attribute of “DIV” field.

Best regards.

That did not seem to work.

The div fields’ labels are still Left Aligned.

Hello @justinsmith19

I don’t know where you are using the class name and styles, but the form into the page you sent me as reference (https://onlinefinancialservices.co.za/) does not include them.

Best regards.

Apologies, did not add it to the page.

Please check here: https://onlinefinancialservices.co.za/form/

Hello @justinsmith19

Please, don’t make me lose my time. The new form does not use the my-top class name nor include the style definition.

Best regards.

Hi @codepeople

Please see styles here: https://prnt.sc/smtpl6
And div settings here: https://prnt.sc/smtq2i

My apologies, it could be that I did not change the form in time for you to see the correct one.

• This reply was modified 4 years, 6 months ago by justin_19.

Hello,

I’ve visited your forms one more time, and there is not a fieldname20 field in them. You are providing incorrect links.

Please, try entering the CSS rules with the !important; modifier:

#fbuilder .my-top .fields>label,
#fbuilder .my-top .fields>.dfield{clear:none !important; display:block !important;width:100% !important;}

Best regards.

Hi @codepeople

The !important; modifier worked!

Thanks

Hi @codepeople

With reference to the same form…

Do you have any idea as to why it shows the fourth column below the other three columns?

The div is set to 4 columns.

When you choose another Product from the dropdown (Grocery, Tombstone, ..) then it shows the 4 columns perfectly beside each other.

Please advise

Hello @justinsmith19

We are walking in circles. Please, where is the form?

The form is not in this URL https://onlinefinancialservices.co.za/ and is not in this other url https://onlinefinancialservices.co.za/form/

Best regards.

Hi @codepeople

I’m referring to the same form here: https://onlinefinancialservices.co.za/form/

Here is a screenshot to specify the issue: https://prnt.sc/smus5d

Thanks

Hello @justinsmith19

The issue is simple, the DIV field is configured to distribute the fields in 4 columns, but contains 5 fields, and fourth field is set visible/invisible with dependencies, but it is there, so, the fifth field is being displayed in the next row.

Please, enter the following style definition into the “Customize Form Design” attribute:

#fbuilder .column4{clear:none !important;}

Best regards.

Thank you so so much!

I have another question regarding the same form in the topic called Calculated field to show dropdown text, not its value