I had a want to be able to manually resize a text area for those times I end up having a bunch of text or heaps of new lines for dot points and the like. I've created this custom object to allow that, where you can drag the bottom right corner of a text area and resize it. There are a few quirks and oddities I have not been able to work around with very specific sequences of events that will mean it does not retain the resize, but it works 95% of the time. Hopefully someone else finds it useful.
It works on all text area's on a record without any configuration to the code needed.
<style>
.resizableTextArea {
resize: vertical;
overflow: auto;
min-height: 100px;
max-height: 600px;
}
</style>
<script>
Sys.Application.add_load(function() {
var resizeAllTextAreas = $('[id*="_f"][id$="c_text"]');
var currentSizes = {};
var resizing = false;
resizeAllTextAreas.each(function() {
var resizeAllTextArea = $(this);
resizeAllTextArea.addClass('resizableTextArea');
// Store the original size
var originalHeight = resizeAllTextArea.height();
var id = resizeAllTextArea.attr('id');
currentSizes[id] = originalHeight;
// Track resizing state
resizeAllTextArea.on('mousedown', function() {
resizing = true;
});
// Store the resized dimensions on mouseup
$(document).on('mouseup', function() {
if (resizing) {
resizeAllTextAreas.each(function() {
var id = $(this).attr('id');
currentSizes[id] = $(this).height();
});
resizing = false;
}
});
// Apply the current size on focus
resizeAllTextArea.on('focus', function() {
resizeAllTextArea.height(currentSizes[id]);
});
// Update the current size on input
resizeAllTextArea.on('input', function() {
currentSizes[id] = resizeAllTextArea.height();
});
});
// Apply the current size on document focus
$(document).on('focusin', function() {
resizeAllTextAreas.each(function() {
var resizeAllTextArea = $(this);
var id = resizeAllTextArea.attr('id');
resizeAllTextArea.height(currentSizes[id]);
});
});
// Apply the current size on document blur, timeout is needed as Archer changes the classes of text boxes between focus events
$(document).on('focusout', function() {
setTimeout(function() {
resizeAllTextAreas.each(function() {
var resizeAllTextArea = $(this);
var id = resizeAllTextArea.attr('id');
resizeAllTextArea.height(currentSizes[id]);
});
}, 10);
});
});
</script>
