UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: How to resize Xcode Canvas Live Preview window - it refuses to expand vertically despite using .windowResizability(.automatic) ?

Forums > SwiftUI

For some reason, my Xcode Swift Canvas Live Preview window refuses to expand vertically beyond a certain height, even though the content inside requires a taller window. Some content, such as multi-line text, even becomes cut-off as a result :

I tried selecting a different Preview mode ( see buttons on bottom left of preview pane ), but it still does not allow resizing ( including by selecting an dragging on the corners ) :

I've also tried adding some code as described in @twostraw 's https://www.hackingwithswift.com/quick-start/swiftui/how-to-preview-your-layout-in-different-devices ( I put "Mac" as the device ) :

#Preview {
    ContentView()
        .previewDevice(PreviewDevice(rawValue: "Mac"))
}

But the Canvas Live Preview window still remains short and does not expand vertically.

Running the code results in good UI display in a resizable window :

But, the full UI content still does not display properly in the Xcode Canvas Live Preview. Is there a way to make the Xcode Canvas Live Preview window larger ?

Please note, I selected macOS App at the start of the project :

I do not have any code that would be limiting vertical window height. And I am using Xcode Version 15.0.1 (15A507) on macOS 14.1.

Thank you.

3      

@Obelix I may be missing something, but unfortunately .windowResizability(.automatic) did not seem to work. Adding .windowResizability(.automatic) affected the app while it's run, but the Xcode Canvas Live Preview remained constricted in height.

I've made a test code to try to isolate the problem, and, as far as I could tell, for some reason the window within Xcode Canvas Live Preview refuses to expand vertically beyond around 18 vertical lines. Please see screenshot - see how 40 lines have been coded for display, but only 18 lines are shown in the Xcode Canvas Live Preview :

Below is my test code in its entirety. Other than adding .windowResizability(.automatic) and 2 Text views within VStack 's , there are no additional codes beyond the Xcode's default initial SwiftUI macOS App configuration.

test_9838709305App.swift

import SwiftUI

@main
struct test_9838709305App: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowResizability(.automatic)
    }
}

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("""
        1____________________________________
        2____________________________________
        3____________________________________
        4____________________________________
        5____________________________________
        6____________________________________
        7____________________________________
        8____________________________________
        9____________________________________
        10____________________________________
        11____________________________________
        12____________________________________
        13____________________________________
        14____________________________________
        15____________________________________
        16____________________________________
        17____________________________________
        18____________________________________
        19____________________________________
        20____________________________________
        """)
        }
        .padding()
        .border(.green, width: 4)

        VStack {
            Text("""
        21____________________________________
        22____________________________________
        23____________________________________
        24____________________________________
        25____________________________________
        26____________________________________
        27____________________________________
        28____________________________________
        29____________________________________
        30____________________________________
        31____________________________________
        32____________________________________
        33____________________________________
        34____________________________________
        35____________________________________
        36____________________________________
        37____________________________________
        38____________________________________
        39____________________________________
        40____________________________________
        """)
        }
        .padding()
        .border(.red, width: 4)
    }
}

#Preview {
    ContentView()
}

Does anyone see the same results with the same test code ?

I selected macOS App at the time of creating the project.

And I am using Xcode Version 15.0.1 (15A507) on macOS 14.1.

Thank you.

3      

Hi @jayswift,

I see the same result with the test code you provided, i found 2 ways to see all rows in the preview, 1- is adding .fixedSize() to the each of the text views.

VStack {
            Text("""
        1____________________________________
        2____________________________________
        3____________________________________
        4____________________________________
        5____________________________________
        6____________________________________
        7____________________________________
        8____________________________________
        9____________________________________
        10____________________________________
        11____________________________________
        12____________________________________
        13____________________________________
        14____________________________________
        15____________________________________
        16____________________________________
        17____________________________________
        18____________________________________
        19____________________________________
        20____________________________________
        """)
        }
        .padding()
        .border(.green, width: 4)
        .fixedSize()

        VStack {
            Text("""
        21____________________________________
        22____________________________________
        23____________________________________
        24____________________________________
        25____________________________________
        26____________________________________
        27____________________________________
        28____________________________________
        29____________________________________
        30____________________________________
        31____________________________________
        32____________________________________
        33____________________________________
        34____________________________________
        35____________________________________
        36____________________________________
        37____________________________________
        38____________________________________
        39____________________________________
        40____________________________________
        """)
        }
        .padding()
        .border(.red, width: 4)
        .fixedSize()
    }

or

2- adding a fixed layout trait to the preview macro

#Preview(traits: .fixedLayout(width: 1000, height: 1000)) {
    ContentView()
}

4      

@Hectorcrdna Thanks so much for confirming the test code, and finding the 2 methods for fixing the canvas preview !

3      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.