alamodey
alamodey

Reputation: 14953

Can't align left text in Button when it wraps

How do you get the text to align to the left inside a Button, once it wraps onto a second-line the alignment becomes centered. I tried adding a Spacer() but that did not fix it.

Button(action: {
                name = foodcombo.pair
                foodCombos = database.retrieveFilteredCombos(main: foodcombo.pair)
                maxTastes = database.maxTastes(main: foodcombo.pair)
              }) {
                HStack {
                  Text(foodcombo.pair)
                    .frame(width: geometry.size.width * 0.30, alignment: .leading)
                    .font(.system(size: 14))
                    
                  
                  //Spacer()
                }
              }

enter image description here

Upvotes: 1

Views: 839

Answers (1)

Yrb
Yrb

Reputation: 9755

I think you are looking for .multilineTextAlignment(.leading). That causes a Text view alignment modification if there are more than 1 line.

    Button(action: {
        name = foodcombo.pair
        foodCombos = database.retrieveFilteredCombos(main: foodcombo.pair)
        maxTastes = database.maxTastes(main: foodcombo.pair)
    }) {
        HStack {
            Text(foodcombo.pair)
                .frame(width: geometry.size.width * 0.30, alignment: .leading)
                .font(.system(size: 14))
                // To align a Text view, use .multilineTextAlignment
                .multilineTextAlignment(.leading)
        }
    }

Upvotes: 4

Related Questions