NavigationLinks embedded in a List getting clipped in tvOS

Question

Created Oct ’23

Replies 1

Boosts 1

Participants 2

I want to recreate an user experience like in the settings app in tvOS. Therefore I have a HStack with some content on the left side and a List of NavigationLinks on the right side.

However a focused link in the list gets clipped on the left side. I tried paddings and spacers and what not, but nothing helped. Is this is a bug or am I missing something?

Here is some example code to show the problem:

struct ContentView: View {
  var body: some View {
    NavigationStack {
      HStack(spacing: 20) {
        VStack(alignment: .center) {
          Image(systemName: "globe")
            .imageScale(.large)
            .foregroundStyle(.tint)
          Text("Hello, world!")
        }
        
        List {
          ForEach(SomeViewEnum.allCases) { someView in
            NavigationLink(someView.rawValue, value: someView)
          }
        }
        .navigationDestination(for: SomeViewEnum.self) { someView in
          Text(someView.rawValue)
        }
      }
    }
  }
}

And a screenshot to show the problem:

Bildschirmfoto 2023-10-07 um 22.03.12.png

Boost

Answer 1

Bigby Woody OP

Oct ’24

I've had the same issue with Form since tvOS 17. I think it's supposed to be fixed by using the scrollClipDisabled(_:) modifier and the padding() one as explained in the doc.

Although I had to manually find a proper amount of padding on the leading edge (around 60 in my implementation) to make sure the shadow was not clipped.

0