TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

Form Section clips the content, how to avoid this?

Forums > SwiftUI

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.

3      

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)
                }
            }

2      

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?

3      

Hacking with Swift is sponsored by RevenueCat.

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

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.