How to show .overlay with search results full width

Question

var navbody: some View {
    NavigationView {
        ZStack {
            somedarkcolorhere
            List(searchModel.suggestions ?? [], rowContent: { text in
                NavigationLink(destination: MediaSearchResultsView(searchText: text)) {
                    Text(text)
                }
            })
            .overlay(SearchMediaHintsResultsScreen(searchModel: searchModel))
            .searchable(text: $searchModel.searchText
                        // https://stackoverflow.com/questions/69668266/searchable-modifier-not-displaying-search-bar-below-navigation-bar-title
                        /* uncomment for search field to be shown initially and ever.
                         On iPad running 16.1 search field does show initially.
                         On iphone running 15.6.1 navigationTitle shows and search field
                         initially does not
                         */
                        //                        , placement: .navigationBarDrawer(displayMode: .always)
            )
            .navigationTitle("v1_what_are_we_searching_for".localized)
        }
        .onChange(of: searchModel.searchText) { _ in
            searchModel.processChangeOfSearchText()
        }
        .preference(key: ErrorPreferenceKey.self, value: observableError)
        .sheet(isPresented: $observableError.showingError) {
            ErrorView(error: observableError)
        }
    }
}

How to show .overlay with search results full width of the window? currently it has gaps on the left and right

score 1 · Accepted Answer · answered Nov 29 '22 at 16:06

1

It is hard to see from just the code you have shown.

The List has default styling that includes some padding round the edges. You could try using a ForEach, or change the list style with a listStyle(.plain) modifier.

Does your overlay view also have a frame set to occupy the available space, such as .frame(maxWidth: .infinity)?

answered Nov 29 '22 at 16:06

kuncan

76
3

No frame modifier. listStyle(.plain) fixed the issue. Thanks. – Anton Tropashko Nov 30 '22 at 08:41

score 1 · Answer 2 · answered Nov 29 '22 at 22:19

It may be due to the List default ListStyle of .insetGrouped. Try using .plain

Or try adding another view to the top layer of the ZStack that is only there when you want to show the overlay, so that it doesn't block List tap gestures, but can use the full View bounds to show the overlay.

i.e.

      ZStack {
         somedarkcolorhere
         List { }
         if showOverlay { Overlay }
      }

How to show .overlay with search results full width

2 Answers2