如何使 overflow-x 在 angular material 对话框内容中可见

Question

angular material 个对话框中的 mat-dialog-content 出现一些奇怪的行为。

我想显示一些工具提示（不是 angular material 工具提示，而是来自 ng-bootstrap 库的工具提示，因为我希望它们有一些可点击的内容）。当它们向右溢出时，现在，我得到一个滚动条，这不是我想要的行为。

我用

覆盖了默认样式

.mat-dialog-content {
    overflow-x: visible !important;
}

我仍然看到滚动条，使用浏览器开发工具进行的检查显示：

我觉得很奇怪。更令人沮丧的是：当我只是将 'visible' 换成 'hidden' 时有效，但显然也不是期望的行为。

Answer 1

position:absolute 应该同时用于容器 (.tooltip) 和 .tooltiptext。相关的CSS是：

.tooltip {
  position: absolute;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  top: -5px;
  left: 105%; 
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

你可以查看working demo here

我根据你的问题复制的问题可以通过将 css 更改为：

来重新创建

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

Answer 2

我正在使用 ng-bootstrap 库，非常简单的解决方案是将 container="body" 添加到工具提示触发器。

如何使 overflow-x 在 angular material 对话框内容中可见

How to make overflow-x visible in angular material dialog content

modal-dialog

angular-material

ng-bootstrap

angular