-1

I tried to add a bottom sheet on my login page so when the user click on forgot password it shows the bottom sheet and the user can enter its email.

Below is the code.

Button(action: {
                    if self.index == 0 {
                        showSheet.toggle()
                    }
                }) {
                    if self.index == 0{
                        Text("Forget Password?")
                            .foregroundColor(FoodlooseColors.cOrange)
                            .fontWeight(.bold)
                    } else {
                        Text("Forget Password?")
                            .foregroundColor(.clear)
                            .fontWeight(.bold)
                    }
                }
                .sheet(isPresented: $showSheet) {
                    VStack() {
                        Text("Enter your email to reset your password")
                                        .presentationDetents([.fraction(0.15)])
                                        .padding(.top, 50)
                        HStack(spacing: 15){
                            Image(systemName: "envelope")
                                .foregroundColor(FoodlooseColors.cOrange)
                            TextField("Enter Email Address", text: self.$resetEmail)
                            
                        }.padding(.vertical, 20)
                        
                        Button(action: {
                    
                        }, label : {
                            Text("Reset Password")
                                .frame(maxWidth: .infinity, maxHeight: 50)
                        })
                        .background(FoodlooseColors.cOrange)
                        .foregroundColor(.white)
                        .font(.system(size: 16, weight: .bold))
                        .clipShape(Capsule())
                        
                        
                    }
                }
                .padding(.top, 20)

but it looks like this:

enter image description here

As you can see it's compressed. I tried to use frame to change the size but nothing change.

Any idea?

Seb
  • 2,929
  • 4
  • 30
  • 73
  • 2
    Why did you set `.presentationDetents([.fraction(0.15)])`? Clearly, 15% of the screen is not enough to show everything properly, so it has to be compressed. – Sweeper Aug 29 '23 at 06:55

0 Answers0