Blazorise: [AntDesign] Issue with layout Column

[MitchellNZ]

Custom CSS override .ant-col { flex-basis: 0; } (here) is causing overflowing Columns in a Row to shrink all other Columns, instead of wrapping like to new row Ant Design documentation shows.

If the sum of col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.

[stsrki]

First thank you for the PR.

I have looked at your code and I have few comments,

1. I agreed flex-basis: 0; can be removed, but I would leave flex-grow: 1; for .ant-col. This is needed or otherwise every row/column will shrink in size.
2. Regarding the AntDesign documentation, gutter [horizontal, vertical] can also be an object. So that it's possible to define sizes for different breakpoints(xs,sm,md,lg). Your implementation covers only one size(int). I guess that means it's the same for all breakpoints?
3. You have added Gutter only to AntDesign Row and Column implementation. But the problem is that custom component implementation will never be used directly. Only the default Row and Column can be _seen_ by the Blazor and Visual Studio ntellisense. Which means that Gutter either must be moved to the base Row and Column classes. but that would mean that all other providers will need to have the same functionality,

[stsrki]

I'm really not an expert in AntDesign. I will do some modifications to your PR but first, is gutter always set in px? Wouldn't em, rem be better?

[MitchellNZ]

Thanks for taking the time to look at it.

1. Sounds great - I'm happy with that.
2. Yes, that is true. My original plan was to implement your IFluentSpacing and extend it with a Gutter option (similar to Margin). But I wanted to get your feedback before I spent the time (this would probably be much faster for you, but I'm happy to contribute!)
3. Good point. I was just planning to use the AntDesign.Row directly, but I think it would be better if you are happy to implement a system like this for all providers. I personally think its a nice simple way to do spacing for a grid style system like this.

I use ng-zorro for work (Angular implementation of Ant Design) and they also use a pixels system.
I'm happy with px or em. I was just following the Ant Design docs on this one.

Please let me know if there is anything else I can do to help. I really appreciate all the work you are doing!

[stsrki]

Please check the PR changes and see if that is OK!

[MitchellNZ]

@stsrki refactor looks good!

However, its quite important the Row Gutter cascades into the Column.

This is because the Row padding only exists to offset for the Columns, therefore it must be derived from the same value.

If you look at the Ant Design docs code snippet, you'll see they only set the Gutter on the Row, but it is used by child columns. This is why I set it up as a CascadingParameter in my original version.

_Row.razor_

...
<CascadingValue Value="@Gutter">
    @ChildContent
</CascadingValue>
...

[stsrki]

Ahh, that makes sense. I thought you made a mistake by making it CascadingParameter. I have fixed it.

[MitchellNZ]

Great! Looks good now, thanks a lot for that!
I did a quick test in the demo app (Ant Design and Material) and its working as I would expect.

However, like you said, this doesn't allow for different breakpoints yet.
Possibly worth adding a task item to make this work with something like IFluentSpacing in future?

Obviously that's your call, I'm happy to help implement anything further via PRs/review, if you think its a good idea.

[stsrki]

For now I will leave it like this. I don't want to lose too much time now as I'm really busy with finishing 0.9. Just please create new ticket and describe the problem so I can get back to it later. After that I will merge the PR. tnx

[MitchellNZ]

@stsrki created with #687.
Thanks again for all your help!