Support » Plugin: Calculated Fields Form » Summary multi-column

  • Resolved Bakhshi

    (@bakhshi)


    Hello

    The fields in the summary are displayed as single columns!
    How to display fields in multiple columns?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @bakhshi

    Yes, of course, it is simply CSS. The summary fields include pair of predefined class names assigned to the fields’ labels and values:

    summary-field-title

    and

    summary-field-value

    You can replace them with the class names you want through the settings of summary field.

    So, you can enter the style definition below, into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png) to display the summary as an unique row:

    
    #fbuilder .summary-field-title,
    #fbuilder .summary-field-value{float:left; clear:none;}
    #fbuilder .summary-field-value{margin-right:40px;}
    

    Editing the CSS rules you can give them the appearance you want to the summary.

    Best regards.

    Thankful
    Works fine on web page.
    But how do I create this style on the print page?

    Plugin Author codepeople

    (@codepeople)

    Hello @bakhshi

    Please, define the CSS rules with the !important; modifier.

    Best regards.

    what is the class name?

    Plugin Author codepeople

    (@codepeople)

    Hello @bakhshi

    My recommendation was to define the CSS rules in the styles I sent you previously, with the !important; modifier.

    
    #fbuilder .summary-field-title,
    #fbuilder .summary-field-value{float:left !important; clear:none !important;}
    #fbuilder .summary-field-value{margin-right:40px !important;}
    

    If you need additional help customizing the form’s appearance, you should contact us through our private website: Custom Coding Service

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.