SwiftUI: How to size a popover to content with a Form on iOS 14.5

I am having a problem getting a popover on an iOS app (simulator iOS 14.5) to size correctly to the content if I use a Form in the popover.

I have a popover as such:
Code Block
...
.popover(isPresented: $showPersonEditor) {
PersonEditor(chosenPerson: $chosenPerson)
.environmentObject(document)
}
...

Within my PersonEditor struct, if I create a Stack in the body as follows, then the popover sizes correctly according to the content:
Code Block
...
VStack(spacing: 0) {
Text("Person Editor").font(.headline).padding()
Divider()
TextField("Name", text: $name, onEditingChanged: { began in
if (!began) {
document.renamePerson(chosenPerson, to: name)
}
}).padding()
TextField("Add info", text: $infoToAdd, onEditingChanged: { began in
if (!began) {
chosenPerson = document.addInfo(infoToAdd, toPerson: chosenPerson)
infoToAdd = ""
}
}).padding()
Text("Test")
Spacer()
}

However, when I use a Form within the VStack in order to group my fields, then the popover doesn't size correctly anymore! Instead it just shows the popover title and a tiny bit underneath.
This is the code with the form:
Code Block
VStack(spacing: 0) {
Text("Person Editor").font(.headline).padding()
Divider()
Form() {
Section {
TextField("Name", text: $name, onEditingChanged: { began in
if (!began) {
document.renamePerson(chosenPerson, to: name)
}
}).padding()
TextField("Add info", text: $infoToAdd, onEditingChanged: { began in
if (!began) {
chosenPerson = document.addInfo(infoToAdd, toPerson: chosenPerson)
infoToAdd = ""
}
}).padding()
}
Section(header: Text("Test")) {
Text("Test")
}
}
Spacer()
}

This worked with the simulator for iOS 13.4.x but does not work with 14.5.
Can anyone help?
Thanks,
Kristian.

Replies

Can you show a complete code to reproduce the issue?
you may have to control the size yourself. Something like this:

Code Block
var body: some View {
GeometryReader { geom in
...
.popover(isPresented: $showPersonEditor) {
PersonEditor(chosenPerson: $chosenPerson)
.environmentObject(document)
.frame(width: geom.size.width/2, height: geom.size.height/2)
}
...
}


...
  • Using 15.2 simulators, controlling the size only works on ipad simulators, but phone simulators show a full screen popover. When you specify a size, the content you put in there will be limited by that size, but it's centered in this big huge popover. Really want the popover to be as big as the content.

Add a Comment