Form Component has No Left Margin

I have a column set (two columns) inside a Form component in a v2 page. When the page renders, the left column is all the way over to the left margin of the page without even a few spaces in the left margin. This looks bad and I need to know how to add spaces. I can’t find how to do that anywhere.

There are a few ways to add margin and padding to pages in Skuid.

If you want to do it at a page level, I would recommend using the Design System. Within the Design System select Components → Page component and set the padding in General. If you use the Default variant, the plus side is all other pages you create with the Design System will have the same padding in the future. The downside is, if you use Page Includes, you may end up wanting a Page Include specific variant without padding.

If it’s a one-of area where you want to adjust spacing, you can do it on the Form itself. It’s similar pattern to what you’ll see in other components: select the component in the Page builder → Styles → Margins. This is where you can adjust the left margin. Similar to the page component, if you want this to apply to all Forms you can instead change or add a variant in the Design System to the Form component.

To adjust the spacing between columns in the Form, you would select the Column Set in the Form and modify the Column gutter size.

2 Likes

I will try this. Thanks so much for the reply!