xxxxxxxxxx1
<h2>textarea do not autoresize</h2>2
<p></p>3
<div id="accordionzusatzinfo" class="accordion"> 4
<div class="accordion-item">5
<h2 class="accordion-header" id="headingThree">6
<button type="button" class="accordion-button collapsed"7
data-mdb-collapse-init 8
data-mdb-toggle="collapse"9
data-mdb-target="#collapseThree"10
aria-expanded="false"11
aria-controls="collapseThree">First Accordion Lore ipsum12
</button>13
</h2>14
<div id="collapseThree" class="accordion-collapse collapse"15
data-mdb-parent="#accordionzusatzinfo"16
aria-labelledby="headingThree">17
<div class="accordion-body">18
<div class="row align-items-center"> 19
<div class="col-4"> 20
<div class="form-outline"> 21
<textarea id="area1" name="txtideezusatz" class="form-control bg-light auto-resize" 22
>Lorem ipsum dolor sit amet, consectetur23
adipiscing elit, sed do eiusmod tempor incididunt 24
ut ut et dolore magna aliqua. Ut enim ad minim veniam, 25
quis nostrud exercitation ullamco laboris nisi ut aliquip 26
ex ea commodo consequat. Duis aute irure dolor in reprehate27
vetate verun ess cillum dolore eu fugiat nulla pariatur. 28
Außer sündiger occaecat cupit nicht proident, sunt in culpa29
qui officia desergnad mollit anim id est laborum.</textarea>30
</div>31
</div>32
</div>33
</div>34
</div> 35
</div> 36
</div>37
<p></p>38
<p></p>39
40
<div id="accordionzusatz" class="accordion"> 41
<div class="accordion-item">42
<h2 class="accordion-header" id="headingFour">43
<button type="button" class="accordion-button collapsed"44
data-mdb-collapse-init 45
data-mdb-toggle="collapse"46
data-mdb-target="#collapseFour"47
aria-expanded="false"48
aria-controls="collapseFour">Second Accordion Lore ipsum49
</button>50
</h2>51
<div id="collapseFour" class="accordion-collapse collapse"52
data-mdb-parent="#accordionzusatz"53
aria-labelledby="headingFour">54
<div class="accordion-body">55
<div class="row align-items-center"> 56
<div class="col-4"> 57
<div class="form-outline"> 58
<textarea id="area2" name="txtideezusatz" class="form-control bg-light auto-resize" 59
>Lorem ipsum dolor sit amet, consectetur60
adipiscing elit, sed do eiusmod tempor incididunt 61
ut ut et dolore magna aliqua. Ut enim ad minim veniam, 62
quis nostrud exercitation ullamco laboris nisi ut aliquip 63
ex ea commodo consequat. Duis aute irure dolor in reprehate64
vetate verun ess cillum dolore eu fugiat nulla pariatur. 65
Außer sündiger occaecat cupit nicht proident, sunt in culpa66
qui officia desergnad mollit anim id est laborum.</textarea>67
</div>68
</div>69
</div>70
</div>71
</div> 72
</div> 73
</div>74
<p></p>75
<p></p>76
77
<h2>without accordion: textarea autoresize</h2>78
<div class="form-outline"> 79
<textarea id="area2" name="txtideezusatz" class="form-control bg-light auto-resize" 80
>Lorem ipsum dolor sit amet, consectetur81
adipiscing elit, sed do eiusmod tempor incididunt 82
ut ut et dolore magna aliqua. Ut enim ad minim veniam, 83
quis nostrud exercitation ullamco laboris nisi ut aliquip 84
ex ea commodo consequat. Duis aute irure dolor in reprehate85
vetate verun ess cillum dolore eu fugiat nulla pariatur. 86
Außer sündiger occaecat cupit nicht proident, sunt in culpa87
qui officia desergnad mollit anim id est laborum.</textarea>88
</div>1
1
xxxxxxxxxx1
var autoResizeTextarea = function(elements, options) {2
var config = {3
maxHeight: Infinity4
}5
for (var option in options) {6
config[option] = options[option]7
}8
for (var i = 0; i < elements.length; i++) {9
forEachElement(elements[i])10
}11
12
function elementHeight(element) {13
return parseFloat(getComputedStyle(element, null).height.replace("px", ""))14
}15
16
function initInternal(element) {17
var initialDisplay = element.style.display18
element.style.display = "block" // prevent display="none"19
element.autoResizeTextarea.initialHeight = elementHeight(element)20
element.autoResizeTextarea.initialScrollHeight = parseFloat(element.scrollHeight)21
if (element.autoResizeTextarea.initialScrollHeight > element.autoResizeTextarea.initialHeight) {22
element.autoResizeTextarea.initialHeight = element.autoResizeTextarea.initialScrollHeight + 223
}24
element.style.height = element.autoResizeTextarea.initialHeight + "px"25
element.style.display = initialDisplay26
}27
28
function init(element) {29
element.autoResizeTextarea = {}30
initInternal(element)31
updateElement(element)32
if (!element.autoResizeTextarea.initialHeight) {33
// try again, element might take longer to render34
setTimeout(function() {35
initInternal(element)36
updateElement(element)37
}, 500)38
}39
}40
41
function updateElement(element) {42
element.style.height = element.autoResizeTextarea.initialHeight + "px"43
var newHeight = element.autoResizeTextarea.initialHeight + element.scrollHeight - element.autoResizeTextarea.initialScrollHeight44
newHeight = Math.max(newHeight, element.autoResizeTextarea.initialHeight)45
element.style.height = Math.min(newHeight, config.maxHeight) + "px"46
}47
48
function forEachElement(element) {49
init(element)50
element.addEventListener("input", function() {51
updateElement(element)52
})53
}54
}55
autoResizeTextarea(document.querySelectorAll("textarea.auto-resize"), {56
maxHeight: 42057
})58
59
document.addEventListener('shown.mdb.collapse', (e) => {60
autoResizeTextarea(document.querySelectorAll("textarea.auto-resize"), {61
maxHeight: 42062
})63
}) Console errors: 0