Slate Causes Errors in HTML Snippet

Posted October 23, 2018

The Issue

example of an embedded Slate form validation error

example of an embedded Slate form validation error

Some authors embedding Slate forms using an HTML Snippet component report the forms may not function correctly and display an error. There appear to be conflicts with some of the form fields and features; e.g. address validation fails and the form cannot be submitted.

Workaround

Anyone embedding Slate forms should add additional CSS rules to prevent conflicts between UBCMS and Slate class names (e.g. "header").

Add the following code in the same HTML Snippet as the Slate embed, or anywhere on the page. It should prevent the validation error, allowing normal submission.

<style>
.dialog_host .dialog .header {
position: static;
height: auto;
}
.dialog_host .dialog div {
margin: 1em 0 0;
}
</style>