macOS + Swift + Xcode: Button label text only partially visible on button

Hello,

I have a view with a vertical stack, some text and a button. With the current code the top half of the button is cut off. This includes the blue background and the labels text. It is beyond me how to adjust the code to correct this. The view is part of a navigation view that has a frame size of 1200 wide, 900 tall.
Below is the code in question.

Regards,

Chris

import SwiftUI

struct PrincipalDetailView: View {

@EnvironmentObject var viewModel : ViewModel

var body: some View {
    VStack (){
        Text("Update Value Displayed and Hit Return")
            .font(.largeTitle)
            .frame(width: 500, height: 100, alignment: .top)
        
        TextField("Edit Value -> ", text: $viewModel.cellValue)
            .frame(width: 125, height: 50, alignment: .top)
            .font(.system(size: 20, weight: .light))
        
        Spacer()
            .frame(height: 300)
        
        Button(action: {
            viewModel.updateVariables(parameter: "currentView", value: 1)
            viewModel.updateVariables(parameter: "numViews", value: 3)
            viewModel.updateValue(cellId: viewModel.variables[0].cellId, updatedValue: viewModel.cellValue)
        }, label: {
            Text("Update Value")
                .font(.headline)
                .fontWeight(.semibold)
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal, 20)
                .background(
                    Color.blue
                        .cornerRadius(10)
                )
        } )
    }
}

}

Please make sure all of your code is inside a code fence so that it is easier to read.

The reason the text of the button is getting clipped is because Button has a fixed height and you're increasing the size of the view within the button. Apply the PlainButtonStyle button modifier to the button:

Button(action: {
    // ...
}, label: {
    Text("Update Value")
        .font(.headline)
        .fontWeight(.semibold)
        .foregroundColor(.white)
        .padding()
        .padding(.horizontal, 20)
        .background(Color.blue)
        .cornerRadius(10)
})
.buttonStyle(PlainButtonStyle())

Perfect.

Thanks Peter

Terms of Service

Privacy Policy

Cookie Policy