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

Divider与Popover一起使用时会有样式bug #10914

Closed
tz310200 opened this Issue Jun 14, 2018 · 1 comment

Comments

Projects
None yet
3 participants
@tz310200

tz310200 commented Jun 14, 2018

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

Version

3.5.3

Environment

chrome 66.0.3359.181

Reproduction link

Edit on CodeSandbox

Steps to reproduce

state = {
visibleTooTip: false,
};

handleVisibleChange = visibleTooTip => {
this.setState({ visibleTooTip });
};

const contentTip = (


{/* {fucStep.map((item, index) => (
<p key={stepTip-${index}}>
第{cnNumber[index 1]}步: {item.message}


))}
{extraTip} */}

这是测试这是测试


这是测试这是测试


这是测试这是测试

    <Divider>指令不区分大小写</Divider>
    <p>输入回车确认</p>
    <p>输入 ok 保存整个采购单</p>
    <p>输入 cancel 取消当前批次的采集,重新提示输入批号</p>
    {/* <p>输入 back 返回上一步骤</p> */}
    <p>输入 exit 取消当前采购单操作,返回查询界面</p>
    <p>输入 help 弹出说明</p>
  </div>
);


    <Popover
        visible={this.state.visibleTooTip}
        onVisibleChange={this.handleVisibleChange}
        content={contentTip}
        placement="bottomRight"
        title="操作提示"
        trigger="click"
      >
        <Button shape="circle" icon="question-circle" />
      </Popover>

What is expected?

tooltip宽度自适应每行长度
Divider自适应tooltip
image

What is actually happening?

image

tooltip宽度被Divider撑满了屏幕

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Jun 14, 2018

Translation of this issue:


Divider will have style bugs when used with Popover

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

Version

3.5.3

Environment

Chrome 66.0.3359.181

Reproduction link

Edit on CodeSandbox

Steps to reproduce

   
  State = {
    visibleTooTip: false,
  };

 handleVisibleChange = visibleTooTip => {
    this.setState({ visibleTooTip });
  };

   Const contentTip = (
      


        {/* {fucStep.map((item, index) => (
          <p key={stepTip-${index}}>
            Step {cnNumber[index 1]}: {item.message}
          


        ))}
        {extraTip} /}
        

This is a test this is a test


        

This is a test this is a test


        

This is a test this is a test


   
        The command is case-insensitive
        

Enter Enter Confirmation


        

Enter ok to save the entire purchase order


        

Enter cancel to cancel collection of the current batch and re-enter the batch number


        {/

Enter back to return to the previous step

*/}
        

Enter exit to cancel the current purchase order operation and return to the query interface


        

Enter help pop-up instructions


      

    );

        <Popover
            Visible={this.state.visibleTooTip}
            onVisibleChange={this.handleVisibleChange}
            Content={contentTip}
            Placement="bottomRight"
            Title="operation prompt"
            Trigger="click"
          >
            
          

What is expected?

Tooltip width adaptive per line length
Divider adaptive tooltip
image

What is actually happening?

image

Tooltip width is filled with screen by Divider

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment