reCAPTCHA covers the next button

We are using reCAPTCHA on a portal application wizard that navigates through multiple interfaces.  The problem is that the reCAPTCHA graphic is covering the next button on some of the screens.  Has anyone had this problem and found a good solution?

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    >>>>Change Layout: Modify the layout to provide more space for the reCAPTCHA, ensuring it doesn’t overlap the button.

    >>>>Responsive Design: Make sure your design is responsive so it adapts to different screen sizes, reducing the chance of overlap.

    >>>>Test on Multiple Browsers/Devices: Check your interface across different browsers and devices to ensure the issue is resolved universally.

  • 0
    Certified Lead Developer
    in reply to Srinivas

    Can you please share the Appian SAIL code that is doing what you describe! I am curious!

  • 0
    Certified Senior Developer
    in reply to Stefan Helzle

    Hi Stefan,

    In this below example, created a columns layout where the first column contains a placeholder for the reCAPTCHA widget, and the second column contains the "Next" button, and included a spacer column in between, which can be adjusted to ensure there's no overlap. The reCAPTCHA validation state is simulated with a local variable local!reCaptchaValidated, which would need to be replaced with actual logic to check whether the reCAPTCHA was successfully completed.

    if anything wrong ,please teach me!

    Code:

    load(
    local!reCaptchaValidated: false,
    a!formLayout(
    label: "Example Form with reCAPTCHA",
    contents: {
    /* reCAPTCHA and navigation buttons in a columns layout */
    a!columnsLayout(
    columns: {
    /* First Column: reCAPTCHA placeholder */
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: "reCAPTCHA Widget Placeholder"
    /* Actual reCAPTCHA component would go here */
    )
    }
    ),
    /* Spacer Column */
    a!columnLayout(
    width: "10X",
    contents: null
    ),
    /* Second Column: Next Button */
    a!columnLayout(
    contents: {
    a!buttonLayout(
    primaryButtons: a!buttonWidget(
    label: "Next",
    style: "SOLID",
    size: "STANDARD",
    disabled: not(local!reCaptchaValidated),
    value: "next"
    /* Add your navigation logic here */
    )
    )
    }
    )
    }
    )
    },
    buttons: a!buttonLayout(
    /* Additional form buttons (e.g., Save, Cancel) would go here */
    )
    )
    )

  • 0
    Certified Lead Developer
    in reply to Srinivas

    Thanks for sharing your solution. I really appreciate it.

    Your initial description sounded much like a HTML/CSS approach which would not work in Appian.

    Next time, please 

Reply Children
No Data