Get GeometryReader to conform to content height

Viewed 260

I have a GeometryReader that properly spaces two input fields in .25/.75 proportion.

The issue is that the height of the geometry reader forms a perfect square where the height matches the width.

Is there a way to get the height to conform to the content within?

        GeometryReader { geometry in HStack(spacing: 20) {
      MsInputField(fieldInput: $country, placeholder: Text("P"))
        .frame(
          width: geometry.size.width * 0.25
        )
      MsInputField(fieldInput: $phone, placeholder: Text("Phone"), preIcon: "DropDown", postIcon: "DropDown")
    }
    }

enter image description here

1 Answers

the GeometryReader takes the available space in the parent view so you need to set the width and height for the GeometryReader or you can set the height and width for the Hstack inside it also

    GeometryReader { geometry in HStack(spacing: 20) {
       MsInputField(fieldInput: $country, placeholder: Text("P"))
      .frame(
      width: geometry.size.width * 0.25
       )
      MsInputField(fieldInput: $phone, placeholder: Text("Phone"), 
          preIcon: "DropDown", postIcon: "DropDown")
       }
       }.frame(width:150,height:50,alignment:.center)
Related