AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 04:46:56 +00:00

[GH-ISSUE #3421] [Bug] Border loses thickness after "New property" ends in Grid #1524

New issue

Closed

opened 2026-03-23 20:50:26 +00:00 by mirror · 11 comments

mirror commented

2026-03-23 20:50:26 +00:00

Owner

Originally created by @Xazin on GitHub (Sep 16, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3421

Originally assigned to: @Xazin on GitHub.

Bug Description

Under the Filter, Sort and Settings in a Database/Grid, the border is less thick than the one where there are columns in the Grid.

This misalignment feels weird.

How to Reproduce

Open AppFlowy
Create a Grid/Database
See the thickness of the border becoming thinner after the New property cell

Expected Behavior

Open AppFlowy
Create a Grid/Database
The thickness of the divider between the top bar and the header row is the same

Operating System

AppFlowy Version(s)

0.3.1

Screenshots

Additional Context

For solution guidance, join our discord and mention me!

Originally created by @Xazin on GitHub (Sep 16, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3421 Originally assigned to: @Xazin on GitHub. ### Bug Description Under the `Filter`, `Sort` and `Settings` in a Database/Grid, the border is less thick than the one where there are columns in the Grid. This misalignment feels weird. ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/42929161/fa5d265f-07d5-45be-bcc8-5833a40c21e5) ### How to Reproduce 1. Open AppFlowy 2. Create a Grid/Database 3. See the thickness of the border becoming thinner after the `New property` cell ### Expected Behavior 1. Open AppFlowy 2. Create a Grid/Database 3. The thickness of the divider between the top bar and the header row is the same ### Operating System * ### AppFlowy Version(s) 0.3.1 ### Screenshots ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/42929161/c7315e34-6132-497b-81c9-8c58d62a6a91) ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/42929161/de49219f-1463-439c-9f23-df2572c190c7) ### Additional Context _For solution guidance, join our discord and mention me!_

mirror

2026-03-23 20:50:26 +00:00

closed this issue
added the
good first issue for devs

hacktoberfest

bug
labels

mirror commented

2026-03-23 20:50:27 +00:00

Author

Owner

@richardshiue commented on GitHub (Sep 17, 2023):

Seconded. Do note that while fixing this bug, make sure that when there is a filter, there should still be a separator!

@richardshiue commented on GitHub (Sep 17, 2023): Seconded. Do note that while fixing this bug, make sure that when there is a filter, there should still be a separator!

mirror commented

2026-03-23 20:50:27 +00:00

Author

Owner

@narayann7 commented on GitHub (Sep 24, 2023):

@Xazin hey, can you assign me this issue?

@narayann7 commented on GitHub (Sep 24, 2023): @Xazin hey, can you assign me this issue?

mirror commented

2026-03-23 20:50:28 +00:00

Author

Owner

@nikhilgarg26 commented on GitHub (Sep 24, 2023):

hey @Xazin i would like to take up this issue, can you please guide how to start with this issue it would be a great help

@nikhilgarg26 commented on GitHub (Sep 24, 2023): hey @Xazin i would like to take up this issue, can you please guide how to start with this issue it would be a great help

mirror commented

2026-03-23 20:50:28 +00:00

Author

Owner

@MayurSMahajan commented on GitHub (Sep 25, 2023):

Hey @nikhilgarg26 I have assigned this one to @narayann7, can you please take a look at some other issues we have to solve. Thanks

@MayurSMahajan commented on GitHub (Sep 25, 2023): Hey @nikhilgarg26 I have assigned this one to @narayann7, can you please take a look at some other issues we have to solve. Thanks

mirror commented

2026-03-23 20:50:28 +00:00

Author

Owner

@Xazin commented on GitHub (Sep 25, 2023):

@Xazin hey, can you assign me this issue?

If you need any assistance please let us know! 👍

@Xazin commented on GitHub (Sep 25, 2023): > @Xazin hey, can you assign me this issue? If you need any assistance please let us know! :+1:

mirror commented

2026-03-23 20:50:28 +00:00

Author

Owner

@narayann7 commented on GitHub (Sep 25, 2023):

@Xazin sure, i will let you know

@narayann7 commented on GitHub (Sep 25, 2023): @Xazin sure, i will let you know

mirror commented

2026-03-23 20:50:29 +00:00

Author

Owner

@narayann7 commented on GitHub (Sep 26, 2023):

@Xazin i tried to adjust the size of divider and grid cell, still it will difficult to make them same but i think we cant use both divider and grid cell border at a time

@narayann7 commented on GitHub (Sep 26, 2023): @Xazin i tried to adjust the size of divider and grid cell, still it will difficult to make them same but i think we cant use both divider and grid cell border at a time

mirror commented

2026-03-23 20:50:29 +00:00

Author

Owner

@Xazin commented on GitHub (Sep 26, 2023):

@Xazin i tried to adjust the size of divider and grid cell, still it will difficult to make them same but i think we cant use both divider and grid cell border at a time

Hey Narayan, it's definitely possible.

Here are some hints:

Have you tried to remove only the top border of the cell field? (field_cell.dart)
The New property button also has it's own top border, track it down and remove only the top one. grid_header.dart
Now as Richard mentioned, the filter/sort menu needs to have the bottom border, I'll let you play with this yourself, I'll give you the file though: setting_menu.dart

Let me know if you still need more help! 👍

@Xazin commented on GitHub (Sep 26, 2023): > @Xazin i tried to adjust the size of divider and grid cell, still it will difficult to make them same but i think we cant use both divider and grid cell border at a time Hey Narayan, it's definitely possible. Here are some hints: - Have you tried to remove _only_ the top border of the cell field? (`field_cell.dart`) - The `New property` button also has it's own top border, track it down and remove _only_ the top one. `grid_header.dart` - Now as Richard mentioned, the filter/sort menu needs to have the bottom border, I'll let you play with this yourself, I'll give you the file though: `setting_menu.dart` Let me know if you still need more help! :+1:

mirror commented

2026-03-23 20:50:29 +00:00

Author

Owner

@narayann7 commented on GitHub (Sep 27, 2023):

@Xazin sure, yes we can remove the top border of the cell but when we click on filter then we have to show the border, i will go through this case and i will let you know, thank you

@narayann7 commented on GitHub (Sep 27, 2023): @Xazin sure, yes we can remove the top border of the cell but when we click on filter then we have to show the border, i will go through this case and i will let you know, thank you

mirror commented

2026-03-23 20:50:29 +00:00

Author

Owner

@Xazin commented on GitHub (Sep 27, 2023):

@Xazin sure, yes we can remove the top border of the cell but when we click on filter then we have to show the border, i will go through this case and i will let you know, thank you

The solution I explained above takes care of this case.

@Xazin commented on GitHub (Sep 27, 2023): > @Xazin sure, yes we can remove the top border of the cell but when we click on filter then we have to show the border, i will go through this case and i will let you know, thank you The solution I explained above takes care of this case.

mirror commented

2026-03-23 20:50:30 +00:00

Author

Owner

@Xazin commented on GitHub (Nov 3, 2023):

Hey @narayann7, since you haven't made progress, I'll take over this issue and resolve it 👍

@Xazin commented on GitHub (Nov 3, 2023): Hey @narayann7, since you haven't made progress, I'll take over this issue and resolve it :+1:

mirror referenced this issue

2026-03-23 22:15:54 +00:00

[PR #1536] [MERGED] fix: options don't refresh after moving the card #4804