Commit 1e079457c7164d0bb47bd45aaef501780db0a3eb
1 parent
ac963baa
UI: Json React Form - textarea height fix
Showing
2 changed files
with
18 additions
and
3 deletions
@@ -56,8 +56,14 @@ class ThingsboardText extends React.Component<JsonFormFieldProps, ThingsboardTex | @@ -56,8 +56,14 @@ class ThingsboardText extends React.Component<JsonFormFieldProps, ThingsboardTex | ||
56 | } | 56 | } |
57 | 57 | ||
58 | const multiline = this.props.form.type === 'textarea'; | 58 | const multiline = this.props.form.type === 'textarea'; |
59 | - const rows = multiline ? this.props.form.rows : 1; | ||
60 | - const rowsMax = multiline ? this.props.form.rowsMax : 1; | 59 | + let rows = 1; |
60 | + let rowsMax = 1; | ||
61 | + let minHeight = 48; | ||
62 | + if (multiline) { | ||
63 | + rows = this.props.form.rows || 2; | ||
64 | + rowsMax = this.props.form.rowsMax; | ||
65 | + minHeight = 19 * rows + 48; | ||
66 | + } | ||
61 | 67 | ||
62 | return ( | 68 | return ( |
63 | <div> | 69 | <div> |
@@ -77,7 +83,7 @@ class ThingsboardText extends React.Component<JsonFormFieldProps, ThingsboardTex | @@ -77,7 +83,7 @@ class ThingsboardText extends React.Component<JsonFormFieldProps, ThingsboardTex | ||
77 | rowsMax={rowsMax} | 83 | rowsMax={rowsMax} |
78 | onFocus={this.onFocus} | 84 | onFocus={this.onFocus} |
79 | onBlur={this.onBlur} | 85 | onBlur={this.onBlur} |
80 | - style={this.props.form.style || {width: '100%'}}/> | 86 | + style={this.props.form.style || {width: '100%', minHeight: minHeight + 'px'}}/> |
81 | </div> | 87 | </div> |
82 | ); | 88 | ); |
83 | } | 89 | } |
@@ -58,6 +58,15 @@ $previewSize: 100px !default; | @@ -58,6 +58,15 @@ $previewSize: 100px !default; | ||
58 | 58 | ||
59 | .tb-field { | 59 | .tb-field { |
60 | padding-bottom: 18px; | 60 | padding-bottom: 18px; |
61 | + | ||
62 | + .MuiInputBase-multiline { | ||
63 | + flex: 1; | ||
64 | + flex-direction: column; | ||
65 | + .MuiInputBase-inputMultiline { | ||
66 | + flex: 1; | ||
67 | + } | ||
68 | + } | ||
69 | + | ||
61 | &.tb-required { | 70 | &.tb-required { |
62 | label::after { | 71 | label::after { |
63 | font-size: 13px; | 72 | font-size: 13px; |