ngx-intl-tel-input node module changing the styles

Question

I am using ngx-intl-tel-input module in my form to add user phone with country code. Below are the node modules I used to in my Angular 8 project.

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

As the node module needs the dependency of both bootstrap and ngx-bootstrap to work properly.

ISSUE:

• When I use the both bootstrap module, the ngx-intl-tel-input component works properly but the css styles for other pages affects causes the alignment issue.

• If I remove the bootstrap modules, the alignments of other page works well but in the ngx-intl-tel-input, when I select the country from the dropdown list, the list not closing.

Could someone help me resolve this issue or any workaround to close the list on selecting the country from the list.

Answer 1

Remove the bootstrap 4.4.1 dependency and add this piece of CSS to emulate the same behaviour:

.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;
  }
}