reCAPTCHA covers the next button

>>>>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.

>>>>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.

Appian doesn't let you adjust the CSS.

Probably the best approach would be to move the button to the left with perhaps a columns layout with an empty column?

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

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 */
)
)
)

Yes Correct

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