Ng-zorro-antd: nz-carousel 在 nz-carousel-content 没有显式设置高度时,元素的高度被固定为 height:1px

Created on 30 Jun 2019  ·  5Comments  ·  Source: NG-ZORRO/ng-zorro-antd

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-jf5w5t

Steps to reproduce

当没有显式设置 nz-carousel-content 的高度时,在 8.0 版本会被固定为 height: 1px;
这是7.X.X 中的正常结果:https://stackblitz.com/edit/ng-zorro-antd-start-cfvpcv

What is expected?

如 7.X.X 一样可以自适应图片高度

What is actually happening?

高度被定死,无法自适应。

| Environment | Info |
|---|---|
| ng-zorro-antd | 8.0.0 |
| Browser | Chrome 5.0.3770.100 |


官网首页,我们这边的走马灯一般宽度是满屏,然后高度是自适应的

FAQ Carousel

Most helpful comment

image
目前暂时通过这种方式实现想要的效果

All 5 comments

Translation of this issue:

Nz-carousel The height of the element is fixed to height:1px when nz-carousel-content is not explicitly set.

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-jf5w5t

Steps to reproduce

When the height of nz-carousel-content is not explicitly set, it will be fixed to height: 1px in version 8.0;
This is the normal result in 7.X.X: https://stackblitz.com/edit/ng-zorro-antd-start-cfvpcv

What is expected?

Adaptive image height like 7.X.X

What is actually happening?

The height is fixed and cannot be adapted.

| Environment | Info |
|---|---|
| ng-zorro-antd | 8.0.0 |
| Browser | Chrome 5.0.3770.100 |


On the official website homepage, the general width of our walking lights here is full screen, then the height is adaptive.

image
Reproduction link 里面有时候被固定为 1px, 有时候又不是 1px, 本地调试的时候一直都是 1px;

@wxpxzdj

因为这里有两个异步事件:图片的加载和 carousel 对内容高度的计算,当图片没有下载下来时,carousel 如果去计算内容的高度当然就是 1px 了。

组件不应该也不可能知道它里面的内容什么时候下载完成,手动指定高度是必须的。

旧版本不过是增加了渲染的时延,这并不是可依赖的行为,不要依靠 race condition 完成你想要的效果。

@wendzhue 这种情况下不需要固定高度吧,看旧版本也没有显式地设置高度:
image

image
目前暂时通过这种方式实现想要的效果

Was this page helpful?
0 / 5 - 0 ratings