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

Cascader 在 IE & Edge 中浮层与数据列宽度不一致 #11857

Closed
fayhy opened this Issue Aug 23, 2018 · 2 comments

Comments

Projects
None yet
4 participants
@fayhy

fayhy commented Aug 23, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.8.2

Environment

Windows, IE / Edge

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. 使用 IE 或者 Edge 打开链接
  2. 点击下拉数据,到第三层

What is expected?

当数据量相对较大,出现纵向滚动条时,浮层宽度明显比数据列小

image

What is actually happening?

浮层与数据列大小一致

image


Chrome、Firefox 显示正常

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Aug 23, 2018

Translation of this issue:


Cascader Floating layer and data column width in IE & Edge

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.8.2

Environment

Windows, IE / Edge

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Open [link] using IE or Edge (https://pkm8vyr5k0.codesandbox.io/)
  2. Click on the drop-down data to go to the third floor

What is expected?

When the amount of data is relatively large, when the vertical scroll bar appears, the width of the floating layer is significantly smaller than the data column.

image

What is actually happening?

The floating layer is the same size as the data column

image


Chrome, Firefox display normal

@fayhy

This comment has been minimized.

fayhy commented Aug 23, 2018

IE / Edge,displan: inline-block时,滚动条貌似不计算在宽度内
是否可以考虑包一层,单独设置 inline-block,类似以下调整

<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" style="left: 24px; top: 60px;">
  <div>
    <div style="display: inline-block">
      <ul class="ant-cascader-menu">
        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="level-1">level-1</li>
        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="level-1">level-1</li>
        <!-- ...... -->
      </ul>
    </div>
    <div style="display: inline-block">
      <ul class="ant-cascader-menu">
        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="level-2">level-2</li>
        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="level-2">level-2</li>
        <!-- ...... -->
      </ul>
    </div>
    <div style="display: inline-block">
      <ul class="ant-cascader-menu">
        <li class="ant-cascader-menu-item" title="level-3">level-3</li>
        <li class="ant-cascader-menu-item" title="level-3">level-3</li>
        <!-- ...... -->
      </ul>
    <div>
  </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment