时间戳

首页 > 解决方案 > 弹出框显示在左上角，因为 div 的宽度非常小，例如 < 2.5 px

css - 弹出框显示在左上角，因为 div 的宽度非常小，例如 < 2.5 px

问题描述

我在我的 react js 代码中使用了 reactstrap popover。Popover 显示在左上角，因为 div 的宽度几乎小于 2.5px

我正在使用下面提到的版本“reactstrap”：“^7.0.1”，“react”：“^16.3.2”，

<Popover placement="bottom" style={{ backgroundColor: 'lightgrey',  textAlign: 'left', width: '235px' }} isOpen={this.props.popoverVisible} target={this.props.target}>
                    <PopoverBody>
                        <div>
                            {this.getPopOverName(this.props.item)}
                            <div><b>Start: </b>{this.dateObject.start}</div>
                            <div><b>End: </b>{this.dateObject.end}</div>
                        </div>
                    </PopoverBody>
                </Popover>

![在此处输入图像描述[1]][1]

标签： cssreactjsreactstrap

解决方案

从您在评论中的 stackblitz中，从您的 styles.css 中删除该属性以获得与我在这里建议border-style:solid;的相同的结果

相关的 CSS：

.tinyDiv{
  background:red; height:10px; width:3px; margin-left:10%;
  /* border-style:solid; */
  border-width:2px;
  border-color:blue;
}

相关JS：

class MyPopOver extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      popoverOpen: false
    };
  }

  onHover = () => {
  this.setState({
    popoverOpen: true,
  })
}

onHoverLeave = () => {
  this.setState({
    popoverOpen: false,
  })
}

  render() {
    return (<>
      <div className='tinyDiv' id="Popover1" onMouseEnter={this.onHover}
   onMouseLeave={this.onHoverLeave}>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" style={{ backgroundColor: 'lightgrey'}}>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover>
      </div></>
    )
  }
}

推荐阅读