Hi,
Pretty new to PCF controls and not really an HTML/CSS guy.
I created a pct control that includes an input control that will be used as a password entry box.
Purpose is that it looks & feel like the standard textbox, but I'm unable to achieve this.
There are two things that are different compared to the standard textbox.
- It does not draw a box around when focused
- it does not autosize horizontally
Any suggestion on how to tweak this PCF so that it resembles the standard controls?
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
{
this._notifyOutputChanged = notifyOutputChanged;
// Create HTML text input element
this._inputElement = document.createElement("input");
this._inputElement.setAttribute("class", "passwordControl");
this._inputElement.setAttribute("type", "password");
// Extract the input value and update the input element
this._inputValue = context.parameters.boundProperty.raw || "";
this._inputElement.value = this._inputValue;
// Attach on change event handler
this._inputElement.addEventListener("blur", this.onBlur);
// Add the text input to the DOM
container.appendChild(this._inputElement);
this._container = container;
}
public updateView(context: ComponentFramework.Context<IInputs>): void {
// Extract the input value and update the input element
this._inputValue = context.parameters.boundProperty.raw || "";
this._inputElement.value = this._inputValue;
this._inputElement.setAttribute("type", "password");
// Set Width & Height
this._container.style.overflow = "hidden";
this._container.style.height = `${context.mode.allocatedHeight - 8}px`;
this._container.style.width = `${context.mode.allocatedWidth - 8}px`;
}
.passwordControl {
text-align: left;
border-width:0px;
border:none;
outline:none;
}
