My canvas preview doesn't show space around the rows when Form is added. The rows extend all the way to the left and right edges of the screen.

What's up?

Mace asks:

What's up?

Help us to help you! Without seeing any code, you want us to guess? Ok, not very helpful, but I'm guessing you have view modifiers out of order. The order matters. Here's an example.

Paste this into Playgrounds:

import SwiftUI
import PlaygroundSupport
struct OrderMattersView: View {
    var body: some View {
        Text("The order matters!")
            .background(.cyan) // First add background color
            .padding()   // Then add padding
        Text("The order matters!")
            .padding()  // First add padding
            .background(.cyan) // Then add background color
    }
}
PlaygroundPage.current.setLiveView(OrderMattersView())

Show us real code if you'd like real help. Also, no need to paste ALL your code, just the parts giving you trouble.

Hi Mace,

@Obelix is right without code example we can not see how to recreate the issue. I tried to recreate the issue but can not find anything that does what you are describing in a Form are you using a List maybe?

Sorry, I was referring to the code that Paul wrote. His canvas looks different from mine. When I copy and paste this code from the "Creating a form" lecture into XCode:

I don't get the grey border around the textbox that Paul shows in the video.

You're missing the .padding() under Text("Hello, world!")

struct ContentView: View {
    var body: some View {
        Form {
            Text("Hello, world!")
                .padding()
        }
    }
}

Thanks, @vtabmow, but that's not it. Paul removes the padding and the border is still there.

Here's his screen:

Adding the padding on my machine changes the placement, but does not add the grey border.

Copy these four elements to a ContentView(). Build the code, and look at the screen in Preview. (That is, do not run the app in a simulator.)

struct ContentView: View {
    var body: some View {
        Form {
        // Click each element in code window and observe it in the Preview window.
            Text("Top, Bottom, Leading and Trailing")
                .padding()
                // .background(.cyan)
            Text("Leading and Trailing")
                .padding([.leading, .trailing])
            Label("Wifi", systemImage: "wifi.circle.fill")
                .foregroundColor(.blue)
                .padding([.top, .bottom])
                .background(.white)
        } // .frame(width: 300)  // Remove comment tag and click Form keyword.
    } 
}

Your preview is linked to your code.
So, if you click on the first text element, the Preview will draw a border around it to highlight the element you selected in code. Click on the other elements, one at a time and watch the preview window. This highlight is only in the Preview. You won't see it in a running application.

Next, add a modifier to one of the elements. For example, add .background(.cyan) to the first Text() view. As you add the modifier, the Text() view should change in the Preview window!

Now, to answer your question above, in your code listing, click on the Form line. Where is the highlight?
It should surround the entire Form from one edge of the screen to the other!

Next add .frame(width: 300) after the Form's closing bracket.
Click the Form keyword. What do you see?

What do I see? When I have the .frame() enabled, the rows of the form pull in and I see a grey border around my rows. Now they look like Paul's did in the video.

But I'm back to the original intent of my question.

Why does Paul's video have a grey area around his rows without requiring him to add a .frame() to the Form, but I was required to use a .frame() to achieve the same visual effect?

That looks like it. I was indeed on an iPod Touch (7th g) -- I'm not sure why or how.

Interestingly -- when I select Form in the editor, the boundary of the Form extends to the edge of the display. The grey border is contained within the frame.

iPod Touch (7th Gen) appears to be the default selected simulator when you create a new project.