<nz-form-control> in <nz-form-item nzGutter> should generated correct padding #2479

wheeljs posted onGitHub

Version

1.8.0

Environment

Windows 10 Chrome 70.0.3538.102（正式版本）（64 位） ng-zorro-antd@1.8.0

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-z14eiy?file=src%2Fapp%2Fapp.component.html

Steps to reproduce

<nz-form-item nzGutter="8">
  <nz-form-control nzSpan="10">
    <nz-form-text>Col 10 In Form</nz-form-text>
  </nz-form-control>
</nz-form-item>

What is expected?

<nz-form-control> get correct style padding-left: 4px; padding-right: 4px, like [nz-col] in [nz-row].

What is actually happening?

<nz-form-control> has no style, but <nz-form-item> generated margin style.

Other?

Hi, I would like to look into this bug if that's okay, please?

posted by asincole over 6 years ago

@asincole 👏 Sure! Welcome to contribute. Feel free to open a pr.

posted by wendzhue over 6 years ago

Alright, great. I have forked already and will start working on it tonight. This is my first Contribution to an OSS, any tips or hints outside the ones in the CONTRIBUTING.md or general tips? @wendzhue

posted by asincole over 6 years ago

Hi, so I have taken a look at it, I discovered that the nz-form-control selector has no padding added, so I have added that, but then once nzSpan directive is added, the padding rule gets overwritten and then set to 0 which are the rules for nzSpan directive. So I added an extra rule to override it

 .@{form-prefix-cls}-item-control-wrapper {
    display: block;
    width: 100%;
    padding-right: 4px; 
    padding-left: 4px;
    &[class^="@{ant-prefix}-col-"] { // adds the padding rules to overwrite the nzSpan directive rules
      padding-right: 4px;
      padding-left: 4px;
    }

is repeating the rules optimal or is there a better way I can do it?

posted by asincole over 6 years ago

@asincole You can just create a pr and we would review your code there.

posted by wendzhue over 6 years ago

@wendzhue alright. I'll do it in a bit.. sorry about the delay. Thanks.

posted by asincole over 6 years ago