SAP Knowledge Base Article - Public

3239772 - Indentation of Dropdown Fields in Landing Pages is Incorrect

Symptom

You designed the form on Content Studio app with the labels on top of the input fields and added this form to a landing page. When you check the form using Test mode the layout is showing up as expected but when the form is added to the landing page, the labels of the dropdown-type input fields are placed on the side instead of the top. Changing the Label Placement option to "On Top" also doesn't fix the design.

Environment

SAP Marketing Cloud

Cause

This behaviour is caused by a conflict between the Landing Page Editor CSS and Form Editor CSS.

Resolution

The fix will depend on how your form input fields are configured:

  • If the "Use Indentation" checkbox is not selected:

    Simply enable this checkbox on the form dropdown-type input fields on the Form itself. After that, Go to the Form element on the landing page designer and change the "Label Placement" option according to your needs.

  • If the "Use Indentation" checkbox is not selected and your business require this checkbox to stay disabled:

    This fix needs to have the class lpeForm added to the landing page using "Custom CSS" in the properties panel. Remember to press enter after adding the class below to the field.


    .lpeForm .sapCpWidget label {

     display: block;
    }

To correctly add the CSS class to the landing page, do the following steps:

  1. Select the most outer element of the landing page.
  2. Go to "Custom CSS" text block.
  3. Paste the code according to the scenario your form was designed as explained above.
  4. Press Enter.

    It should look like the screenshot above.
  5. After that, select the "Column" element of the form design on the landing page.
  6. On the "Custom CSS" option, input the name of the class that you added to the landing page on step 3 and press enter. The name of the class is lpeForm

    Keywords

    drop-down, drop down, styling, html , KBA , CEC-MKT-LPC , Content Studio: Landing Pages and Forms , CEC-MKT-CCE , Content Studio: Core Editor , Problem

    Product

    SAP S/4HANA Cloud 2208