How to remove the left and right Padding of a List in SwiftUI?

Question

How to remove the left and right Padding of a List in SwiftUI? Every List i create has borders to the leading and trailing of a cell.

What modifier should I add to remove this?

Avario · Accepted Answer · 2020-01-09 02:22:27Z

275

It looks like .listRowInsets doesn't work for rows in a List that is initialised with content.

So this doesn't work:

List(items) { item in
    ItemRow(item: item)
        .listRowInsets(EdgeInsets())
}

But this does:

List {
    ForEach(items) { item in
        ItemRow(item: item)
            .listRowInsets(EdgeInsets())
    }
}

edited Jan 9, 2020 at 2:22

answered Oct 3, 2019 at 0:42

Avario

5,1854 gold badges30 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

a.ajwani Over a year ago

ForEach with an array of Strings gives me the following error. "Cannot convert value of type '[String]' to expected argument type 'Range<Int>'"

Neil Smith Over a year ago

I also find applying the .listRowInsets(_) modifier to a Section within a List achieves the desired outcome.

Chris Kemp Over a year ago

Much more preferable is the answer listed below .listStyle(GroupedListStyle()) which causes all the Section and Rows to indent neatly.

lhunath Over a year ago

Worth noting that there is also a default minimum height for list items. If your views are smaller than this amount, you will see apparent insets that persist despite these changes. Consider: .environment( \.defaultMinListRowHeight, 0 ) on the List.

Casey Perkins Over a year ago

Separators don't match left indentation of content using this approach. They're still where they were before.

|

Tai Le · Accepted Answer · 2020-07-24 10:24:42Z

194

Seem we can use PlainListStyle for List for iOS 14

List {
    Text("Row")
}
.listStyle(PlainListStyle())

edited Jul 24, 2020 at 10:24

answered Jul 11, 2020 at 13:10

Tai Le

9,3646 gold badges47 silver badges37 bronze badges

1 Comment

moonkin Over a year ago

iOS 17: .listStyle(.plain)

Mojtaba Hosseini · Accepted Answer · 2025-07-20 14:55:12Z

145

There are several spacings that you can change in a list. Take a look at this color-coded map and pick the one that fits your needs:

List(1...100, id: \.self) { item in
    Text("\(item)")
        .padding() // 🟣 comment to remove PURPLE padding
        .background(Color.yellow)
        // .listRowInsets(EdgeInsets()) // 🔵 uncomment to remove BLUE inset
}
// .listStyle(.plain) // 🟢 uncomment to remove all GREEN insets all together
// .contentMargins(<#edge#>, 0, for: .scrollContent) // 🟢 uncomment to customize combination of GREEN insets. (Requires iOS 17)
// .listStyle(.grouped) // 🔴 uncomment to remove RED inset

Demo

_{RTL-Demo Image}

For `Section`:

You can use these extra modifiers as well:

.listSectionSpacing(0) // Space between sections
.listSectionMargins(.horizontal, 0) // Space around sections. (Requires iOS 26)

edited Jul 20 at 14:55

answered May 6, 2023 at 12:53

Mojtaba Hosseini

124k45 gold badges342 silver badges328 bronze badges

3 Comments

boring_ape Over a year ago

Great answer! This one explains everything and provides the necessary visual references to the different types of padding that one would want to remove. ✨

Robert Basamac Over a year ago

Any idea how to remove ONLY the top green part but not the leading/trailing green parts?

Mojtaba Hosseini Over a year ago

@RobertBasamac it is now possible from iOS 17. Added as a new 🟢 comment to the answer. For your case, you can pass .top as the edge.

gnarlybracket · Accepted Answer · 2020-05-26 17:11:37Z

31

Use this modifier:

.listRowInsets(EdgeInsets(....))

However, as stated in the documentation, the insets will be applied to the view when inside a list.

Sets the inset to be applied to the view when placed in a list. (emphasis mine)

Using this modifier on the List itself will have no effect on the views inside it. You must use the modifier on the view inside the List for the modifier to have an effect.

Example usage:

List {
    Text("test")
        .listRowInsets(EdgeInsets(top: -20, leading: -20, bottom: -20, trailing: -20))
}

edited May 26, 2020 at 17:11

answered Oct 1, 2019 at 21:59

gnarlybracket

1,7154 gold badges19 silver badges39 bronze badges

Comments

Mojtaba Hosseini · Accepted Answer · 2019-08-25 19:28:21Z

21

The modifier was

.listRowInsets(EdgeInsets(......))

edited Aug 25, 2019 at 19:28

Mojtaba Hosseini

124k45 gold badges342 silver badges328 bronze badges

answered Jun 16, 2019 at 19:25

Just a coder

16.9k18 gold badges92 silver badges149 bronze badges

Comments

Rustam Khisamov · Accepted Answer · 2020-07-20 18:15:24Z

14

You should call

.listRowInsets()

for row, like this:

List(items) {
            YoursRowView()
                .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
        }

answered Jul 20, 2020 at 18:15

Rustam Khisamov

3011 gold badge5 silver badges10 bronze badges

Comments

Andrew · Accepted Answer · 2024-06-25 14:50:33Z

13

2022, MacOS

in case of other solutions will not work (and they at the moment does not [for macOS]), you can use the following hack for macOS:

List(selection: $selectedItems) {
    // some content
}
// solution
.padding(EdgeInsets(top: -10, leading: -20, bottom: -10, trailing: -20))
.clipShape(Rectangle())

also you can do extension with style override of base component of List. This will be sth like:

extension NSTableView {
    open override func viewDidMoveToWindow() {
        super.viewDidMoveToWindow()
    
        // code to remove paddings
        // or change another style like remove bg or sth like this
    }
}

edited Jun 25, 2024 at 14:50

answered Aug 15, 2022 at 10:27

Andrew

11.9k9 gold badges87 silver badges121 bronze badges

2 Comments

Peter Lapisu Over a year ago

not a good option in 13.4 this needs to be -8 and offsets the scroll bar also :(

Liam Over a year ago

@PeterLapisu can any other options solve this issue?

Tatyana · Accepted Answer · 2020-05-13 02:40:35Z

11

.listStyle(GroupedListStyle())

answered May 13, 2020 at 2:40

Tatyana

1391 silver badge2 bronze badges

2 Comments

BDL Over a year ago

Although this code might solve the problem, a good answer should also explain what the code does and how it helps.

Shivam Garg Over a year ago

look at this answer for better information. stackoverflow.com/a/75722515/14180967

atereshkov · Accepted Answer · 2022-02-18 20:43:45Z

8

Remove paddings

iOS 15, Xcode 13

ScrollView {
    LazyVStack {
        ForEach(viewModel.portfolios) { portfolio in
            PortfolioRow(item: portfolio)
        }
    }
}

This gives you complete control over the list (you can also remove separator using this code). Current implementation of List doesn't provide full control and contains some issues.

Note that this is a completely different API. Both List and LazyVStack are lazy containers, but in contrast to List, LazyVStack doesn't reuse cells, which will SIGNIFICANTLY change the performance when rows are more complex views.

edited Feb 18, 2022 at 20:43

answered Jan 9, 2021 at 16:31

atereshkov

4,6241 gold badge41 silver badges53 bronze badges

3 Comments

Alex Over a year ago

this destroys the scroll position if the list mutates

koleS Over a year ago

Note that this is a completely different API. Both List and LazyVStack are lazy containers, but in contrast to List, LazyVStack doesn't reuse cells, which will SIGNIFICANTLY change the performance when rows are more complex views.

Upholder Of Truth Over a year ago

Another thing to be aware of is that if you use a ScrollView instead of a List then you can't easily use the swipe to delete and edit mode functionality that the list provides. You can of course make your own but that's more work.

aheze · Accepted Answer · 2021-08-09 18:33:55Z

5

The above solutions did not solve for me because my List had sections.

This solved for me:

List {
    ForEach(years, id:\.self) { year in
        Section(header: SectionHeader(year)) {
            VStack(alignment:.leading) {
                ForEach(cars[year]!, id:\.self) { car in
                    ListItem(car)
                        .frame(width: UIScreen.main.bounds.size.width,
                               alignment: .center)
                        .listRowInsets(.init())
                }
            }
        }
        .frame(width: UIScreen.main.bounds.size.width,
               alignment: .center)
        .listRowInsets(.init())
        .listStyle(GroupedListStyle())
    }
}

In resume, you have to repeat the command for the section.

edited Aug 9, 2021 at 18:33

aheze

31.5k12 gold badges107 silver badges159 bronze badges

answered May 11, 2021 at 14:50

Duck

36.2k48 gold badges269 silver badges496 bronze badges

1 Comment

chitgoks Over a year ago

When i select an item, it selects all the rows instead using this code.

Samuel Folledo · Accepted Answer · 2024-11-12 00:30:15Z

What worked for me is

import SwiftUI

struct DefaultListModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .listStyle(.plain)
            .scrollContentBackground(.hidden)
            .background(Color.clear)
    }
}

struct DefaultListItemModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .listRowBackground(Color.clear)
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            .listRowSeparator(.hidden, edges: [.bottom])
    }
}

Example usage:

    List {
        if vm.followers.users.isEmpty {
            AppText("No followers yet.", type: .navMedium)
                .modifier(DefaultListItemModifier())

        } else {
            ForEach(vm.followers.users) { player in
                PlayerSocialItemView(player: player)
                .modifier(DefaultListItemModifier())
                .padding(.horizontal, smallerHorizontalPadding)
                .onAppear {
                    if vm.followers.users.last == player {
                        vm.fetchFollowers()
                    }
                }
            }

        }
    }
    .modifier(DefaultListModifier())
    .refreshable {
        vm.resetPagination()
        vm.fetchFollowers()
    }

Inmaculada Bautista · Accepted Answer · 2024-06-12 11:12:13Z

-1

Trailing is big, you can use this: .listRowInsets(EdgeInsets(top: 8, leading: 0, bottom: 8, trailing: 0)) .listRowBackground(Color.color_background)

So the white inset desapear.

answered Jun 12, 2024 at 11:12

Inmaculada Bautista

1

Comments

MiguelG · Accepted Answer · 2025-03-24 04:12:45Z

In my case it was a combination of both modifiers:

.listRowInsets(EdgeInsets()) applied on the main list content and .listStyle(PlainListStyle()) applied on the list view itself:

List{
                Section {
                    VStack(spacing:16) {
                        if isLoading {
                            ForEach(0..<5,id:\.self) { _ in
                                ProjectItemSkeleton()
                            }
                        }
                        else{
                            ForEach(store.projects,id:\._id) { projectItem in
                                NavigationLink(value: projectItem) {
                                    SProjectItem(project: projectItem)
                                        .foregroundStyle(Color.theme.foreground)
                                }
                                .simultaneousGesture(TapGesture().onEnded({ _ in
                                    store.send(.setCurrentProjectSelected(projectItem.name))
                                }))
                            }
                        }
                    }
                    
                } header: {
                    VStack(spacing:16) {
                        HStack {
                            Text("Your")
                            Text("Projects")
                                .fontWeight(.bold)
                            Text("Are Here!")
                            
                        }
                        .font(.title)
                        .frame(maxWidth: .infinity,alignment: .leading)
                        .padding(.horizontal,12)
                        .padding(.vertical,0)
                        
                        HStack {
                            SSearchField(searchValue: $searchText)
                            
                            Button {
                                
                            } label: {
                                Image(systemName: "slider.horizontal.3")
                                    .foregroundStyle(.white)
                                    .fontWeight(.medium)
                                    .font(.system(size: 24))
                                    .frame(width:50.66,height: 50.66)
                                    .background {
                                        Circle().fill(Color.theme.primary)
                                    }
                            }
                        }
                    }
                    .padding(.bottom,16)
                    .background(content: {
                        Color.white
                    })
                }
                .listRowInsets(EdgeInsets())
            }
            .listStyle(PlainListStyle())
            .listSectionSeparator(.hidden)

Collectives™ on Stack Overflow

How to remove the left and right Padding of a List in SwiftUI?

13 Answers 13

6 Comments

1 Comment

For `Section`:

3 Comments

Comments

Comments

Comments

2022, MacOS

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

6 Comments

1 Comment

For Section:

3 Comments

Comments

Comments

Comments

2022, MacOS

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

For `Section`: