Form Section clips the content, how to avoid this?

@kurtkazloy

Jul '23

What I am actually doing is a suggest for a text form. There is a TextField, and suggested list is supposed to be rendered "hovering near it", similar to the following code:

Text("TextInput")
            .overlay(alignment: .topTrailing) {
            Text("SuggestOptions")
                .frame(minHeight: 400)
                .background(Color.green)
                .offset(x: 25, y: 25)
                .opacity(0.5)

overlay example

However, when exactly the same code is embedded into Form Section, the overlaid "Suggest" gets clipped:

Form {
            Section {
                Text("TextInput")
                    .overlay(alignment: .topTrailing) {
                        Text("SuggestOptions")
                            .frame(minHeight: 400)
                            .background(Color.green)
                            .offset(x: 25, y: 25)
                            .opacity(0.5)
                    }
            }

form clips the suggest I am completely lost as to why that happens and, most importantly, how to fix it.

@SplintaWM HWS+

Jul '23

Hi @kurtkazloy,

I beleive the issue you are facing is that overlays are just that, overlays on a view and so we need to create the subview with the same minHeight so as to force the display of the whole section you require, the code below acheives what you request I believe.

Form {
                Section {
                    VStack {
                        Text("TextInput")
                            .overlay(alignment: .topTrailing) {
                                Text("SuggestOptions")
                                    .frame(minHeight: 400)
                                    .background(Color.green)
                                    .offset(x: 25, y: 25)
                                    .opacity(0.5)
                            }
                    }
                    .frame(minHeight: 400, alignment: .topLeading)
                }
            }

@kurtkazloy

Jul '23

This is how it looks like: added frame This does help with the clipping, but now the section itself (white background behind the TextInput) has increased in size as well. If there were more elements in the form, they would get pushed down as well. Is there a way to make SuggestOption kind of "float above" the form, not affecting the original section sizes, but not getting clipped as well?

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.