ngx-intl-tel-input 节点模块更改样式答案

【问题标题】：ngx-intl-tel-input node module changing the stylesngx-intl-tel-input 节点模块更改样式
【发布时间】：2020-09-24 23:55:02
【问题描述】：

我在表单中使用 ngx-intl-tel-input 模块来添加带有国家代码的用户电话。以下是我在 Angular 8 项目中使用的节点模块。

ngx-intl-tel-input : ^14.1.0
bootstrap : ^4.4.1
ngx-bootstrap : ^5.6.1

由于 node 模块需要 bootstrap 和 ngx-bootstrap 的依赖才能正常工作。

问题：

当我使用两个引导模块时，ngx-intl-tel-input 组件正常工作，但其他页面的 css 样式会影响导致对齐问题。
如果我删除引导模块，其他页面的对齐方式会起作用好吧，但是在 ngx-intl-tel-input 中，当我从下拉列表，列表未关闭。

有人可以帮我解决这个问题或任何解决方法来关闭从列表中选择国家的列表。

【问题讨论】：

如果您可以创建 Stackblitz 示例，我可以研究一下。
你能解决这个问题吗？
我面临同样的问题。 @pasevin 你能修好它吗？

标签： jquery css angular css-selectors angular8

【解决方案1】：

删除 bootstrap 4.4.1 依赖项并添加这段 CSS 以模拟相同的行为：

.iti {
  box-sizing: border-box;

  .iti__flag-container .dropdown-menu.country-dropdown {
    display: none;
  }

  .iti__flag-container.open .dropdown-menu.country-dropdown {
    display: block;
    inset: 100% auto auto 0px;
    transform: translateY(0px);

    position: absolute;
    z-index: 1000;
    float: left;
    min-width: 10rem;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: .25rem;
  }

  .tooltip {
    display: block;
    pointer-events: none;
    position: absolute;
    z-index: 1070;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;

    & .arrow {
      position: absolute;
      display: block;
      width: .8rem;
      height: .4rem;

      &:before {
        position: absolute;
        content: '';
        border-color: transparent;
        border-style: solid;
      }
    }
    &.show {
      opacity: 0.9;
    }
  }

  .bs-tooltip-top {
    padding: .4rem 0;

    &.tooltip .arrow:before {
      top: 0;
      border-width: .4rem .4rem 0;
      border-top-color: #000;
    }

    & .arrow {
      bottom: 0;
    }
  }

  .tooltip-inner {
    max-width: 200px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem;
  }
}

【讨论】：