Issue on Model Driven App

[ZlatkoSp]

Hi, when I use the PCF on Model Driven App the listing of the countries is not visible, is there a way to fix this?

thanks in advance, Zlatko

[rob-pike]

I am having the same issue. The drop down list of countries is not displaying on top of the form so I am not able to see what I am scrolling through.

[MuffMacaroon1]

+1 on this issue, I really would like to use this PCF in order to prevent my users from using wrong prefixes for different countries. Hopefully a fix can be provided :)

[WilbertWalrus]

Looks like an overflow issue (on the parent flexbox).

But regardless, after saving and reload the view, component doesn't pick up the saved value.

[dga205]

Looks like an overflow issue (on the parent flexbox).

But regardless, after saving and reload the view, component doesn't pick up the saved value.

I have the same issue. Where I should set the overflow?

[dga205]

Looks like an overflow issue (on the parent flexbox). But regardless, after saving and reload the view, component doesn't pick up the saved value.

I have the same issue. Where I should set the overflow?

I was able to solve the problem. Firts, I had to create a separate div.

    let divCont= document.createElement('div');
    divCont.id="flagContainer";

    this._phoneInput = document.createElement('input');
    this._phoneInput.setAttribute('type', 'text'); 
    this._phoneInput.className="inputText";
    this._phoneInput.readOnly=context.mode.isControlDisabled;
    this._phoneInput.setAttribute(context.mode.isControlDisabled?"disabled":"enabled","true");
    this._phoneInput.addEventListener('change', this.onPhoneChange.bind(this));
    this._phoneInput.addEventListener("countrychange",this.onCountryChange.bind(this));
    container.appendChild(divCont);
    container.appendChild(this._phoneInput);

And, in the Option parameter:

let options = { dropdownContainer: document.querySelector("#flagContainer"), }

And, in the css, I removed the top and left attributes from the class .iti--container

[EmilRosenovPetrov]

Looks like an overflow issue (on the parent flexbox). But regardless, after saving and reload the view, component doesn't pick up the saved value.

I have the same issue. Where I should set the overflow?

I was able to solve the problem. Firts, I had to create a separate div.

    let divCont= document.createElement('div');
    divCont.id="flagContainer";

  this._phoneInput = document.createElement('input');
  this._phoneInput.setAttribute('type', 'text'); 
    this._phoneInput.className="inputText";
    this._phoneInput.readOnly=context.mode.isControlDisabled;
    this._phoneInput.setAttribute(context.mode.isControlDisabled?"disabled":"enabled","true");
  this._phoneInput.addEventListener('change', this.onPhoneChange.bind(this));
    this._phoneInput.addEventListener("countrychange",this.onCountryChange.bind(this));
    container.appendChild(divCont);
    container.appendChild(this._phoneInput);

And, in the Option parameter:

let options = { dropdownContainer: document.querySelector("#flagContainer"), }

And, in the css, I removed the top and left attributes from the class .iti--container

HI! Please, can you explain more thoroughly what did you do and where to put your custom code?

[rafaelbatista6]

I also had this issue of overflow, simplest way to corret here is just to add a single attribute of css on file IntlTelInputComponent.css

ul#country-listbox{ position : fixed; }

rebuild solution and this will work. @EmilRosenovPetrov I have attached below a managed solution of the PCF Control compatible with model driven app on my repo fork with this update. https://github.com/rafaelbatista6/IntlTelInputPCF

Enjoy !

[WilbertWalrus]

I also had this issue of overflow, simplest way to corret here is just to add a single attribute of css on file IntlTelInputComponent.css

ul#country-listbox{ position : fixed; }

rebuild solution and this will work. @EmilRosenovPetrov I have attached below a managed solution of the PCF Control compatible with model driven app on my repo fork with this update. https://github.com/rafaelbatista6/IntlTelInputPCF

Enjoy !

Hi @rafaelbatista6, can you update intl-tel-input libary to 24.4.0?

https://github.com/rafaelbatista6/IntlTelInputPCF/blob/master/source/package.json#L15

Thanks!

[rafaelbatista6]

@WilbertWalrus Unfortunately, the newer versions of the package intl-tel-inpu introduces changes in the user experience (e.g., version 19 introduces a search control). Additionally, starting from version 20, the package cannot compile without errors that need to be addressed. Higher version that is stable and within the same user experience is version 18, which I pushed on my Gihub.