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

Posted 2023-03-06

【中文标题】ngx-intl-tel-input 节点模块更改样式

【英文标题】：ngx-intl-tel-input node module changing the styles

【发布时间】：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 你能修好它吗？

【参考方案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;