Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

inline form nz-select & nz-input out of alignment #306

Closed
cipchk opened this issue Sep 15, 2017 · 4 comments · Fixed by #362
Closed

inline form nz-select & nz-input out of alignment #306

cipchk opened this issue Sep 15, 2017 · 4 comments · Fixed by #362
Assignees
Labels

Comments

@cipchk
Copy link
Member

cipchk commented Sep 15, 2017

I'm submitting a...


[x] Bug report  

Current behavior

html:

<form nz-form [nzLayout]="'inline'">
	<div nz-form-item>
		<div nz-form-control>
			<nz-select [(ngModel)]="s.orderby" name="orderby" [nzAllowClear]="false">
				<nz-option [nzValue]="0" nzLabel="按上传时间从晚到早"></nz-option>
				<nz-option [nzValue]="2" nzLabel="按修改时间从晚到早"></nz-option>
				<nz-option [nzValue]="4" nzLabel="按修改时间从早到晚"></nz-option>
				<nz-option [nzValue]="6" nzLabel="按图片名升序"></nz-option>
				<nz-option [nzValue]="8" nzLabel="按图片名降序"></nz-option>
			</nz-select>
		</div>
	</div>
	<div nz-form-item>
		<div nz-form-control>
			<nz-input [(ngModel)]="s.q" name="q" [nzPlaceHolder]="'文件名'"></nz-input>
		</div>
	</div>
	<div nz-form-item>
		<div nz-form-control>
			<button nz-button (click)="load(true)">搜索</button>
		</div>
	</div>
</form>

tim 20170915190420

and for all nz-select nz-input nz-button add [nzSize]="'large'" property is work.

@ryancui92
Copy link

When I use ngFor in options, the select is collapsed.

<form nz-form nzLayout="inline" [formGroup]="searchForm" (submit)="loadData(true)">
  <div nz-form-item>
    <div nz-form-label>
      <label>激活日期</label>
    </div>
    <div nz-form-control>
      <nz-datepicker [nzSize]="'large'" [nzPlaceHolder]="'激活日期'" formControlName="activateDate"></nz-datepicker>
    </div>
  </div>
  <div nz-form-item>
    <div nz-form-label>
      <label>查找字段</label>
    </div>
    <div nz-form-control>
      <nz-select nzAllowClear
                  nzSize="large"
                  [formControlName]="'searchKey'">
        <nz-option
          *ngFor="let option of searchKeyOptions"
          [nzLabel]="option.label"
          [nzValue]="option.value">
        </nz-option>
      </nz-select>
    </div>
  </div>
  <div nz-form-item>
    <div nz-form-label>
      <label>查找内容</label>
    </div>
    <div nz-form-control>
      <nz-input [nzSize]="'large'" [nzPlaceHolder]="'查找内容'" [formControlName]="'searchValue'"></nz-input>
    </div>
  </div>
  <button nz-button [nzType]="'primary'" type="submit">查询</button>
  <button nz-button type="button" (click)="searchForm.reset()">清空</button>
</form>

image

ng-zorro-antd version: 0.5.4

@vthinkxie
Copy link
Member

@ryancui- please add style width to nz-select

@ryancui92
Copy link

thx~

@lock
Copy link

lock bot commented Feb 19, 2019

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

@lock lock bot locked as resolved and limited conversation to collaborators Feb 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants