holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get Et2Textarea to automatically fill their available space if no width or height attribute is set

Browse Source
This commit is contained in:
nathan 2021-09-14 11:10:49 -06:00
parent 50a7179fce
commit 6883760d6f
1 changed files with 57 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
api/js/etemplate/Et2Textarea/Et2Textarea.ts
View File

@ -27,6 +27,19 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea)
flex-direction: column;
width: 100%;
height: 100%;
}
/* Get text area to fill its space */
.form-field__group-two {
height: 100%;
display: flex;
flex-direction: column;
}
.input-group {
height: 100%;
display: flex;
}
.input-group__container {
width: 100%;
}
`,
];
@ -40,12 +53,12 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea)
* Specify the width of the text area.
* If not set, it will expand to fill the space available.
*/
width: {type: String, reflect: true},
width: {type: String},
/**
* Specify the height of the text area.
* If not set, it will expand to fill the space available.
*/
height: {type: String, reflect: true},
height: {type: String},
onkeypress: Function,
}
}
@ -53,29 +66,61 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea)
constructor()
{
super();
this.rows = "";
}
connectedCallback()
{
super.connectedCallback();
if(this._width && this._inputNode)
{
this._inputNode.style.width = this._width;
}
if(this._height && this._inputNode)
{
this._inputNode.style.height = this._height;
}
}
/**
* Use width and height attributes to affect style
* It would be better to deprecate these and just use CSS
*
* @param value
*/
set width(value)
{
if(this._inputNode)
{
this._inputNode.style.width = value;
}
this.resizeTextarea();
let oldValue = this._width;
this._width = value;
this.requestUpdate("width", oldValue);
}
set height(value)
{
if(this._inputNode)
{
this._inputNode.style.height = value;
}
this.resizeTextarea();
let oldValue = this._height;
this._height = value;
this.requestUpdate("height", oldValue);
}
/** Override some parent stuff to get sizing how we like it **/
setTextareaMaxHeight()
{
this._inputNode.style.maxHeight = 'inherit';
}
__initializeAutoresize()
{
return;
}
__startAutoresize()
{
return;
}
}